JSFiddle - React, Tailwind, and code Playground

by fxi

HTML

<h1>Drag + input issue</h1>
<span>Input event and drag occurs at the same time. Move the cursor, the drag also starts. When events are correctly handled, this should not happen.</span>


   <div id="container" draggable=TRUE style="border: 1px solid black; padding: 20px;">
     <input type="range" id="myRange" min="0" max="100">
   </div>
   <span id="log"></span>

JavaScript

document.getElementById('myRange').addEventListener('input', function(event) {
    event.stopPropagation();
    event.stopImmediatePropagation();
    l(`Range input value changed: ${event.target.value}`);
  });


  document.getElementById('container').addEventListener('drag', function() {
    l("Event drag bubbled to container");
  });

  function l(text) {
    const elMsg = document.createElement('li');
    elMsg.innerText = text;
    log.prepend(elMsg);
    setTimeout(()=>elMsg.remove(),500);
  }