CHROME CLICK ISSUE

doubleclick event is not triggered if the target event was moved across the DOM on mousedown event

by Roman Bruckner

HTML

<p>
  Mousedown to bring the rectangle forward.</p>
<p>Click the rectangle to see the alert.</p>
<svg id="container" width="500" height="400">
  <rect x="50" y="50" height="100" width="100" fill="blue" />
  <rect x="100" y="100" height="100" width="100" fill="green" />
</svg>
<script>
  var container = document.getElementById('container');

  container.addEventListener('mousedown', function(evt) {
    const rect = evt.target;
    if (rect === container) return;
    // bring <rect> to front and start dragging    
		
    // container.appendChild(rect); 
    
    const dx = evt.offsetX - parseFloat(rect.getAttribute('x'));
    const dy = evt.offsetY - parseFloat(rect.getAttribute('y'));    
    function onMousemove(evt) {
      rect.setAttribute('x', evt.offsetX - dx);
      rect.setAttribute('y', evt.offsetY - dy);
    }
    function onMouseup(evt) {
    	document.removeEventListener('mousemove', onMousemove, false);
     	document.removeEventListener('mouseup', onMouseup, false);       
    }    
    document.addEventListener('mousemove', onMousemove, false);
    document.addEventListener('mouseup', onMouseup, false);    
  }, false);
  
  container.addEventListener('click', function(evt) {
    const rect = evt.target;
    if (rect === container) return;
    // select/highlight the <rect>
    container.querySelectorAll('.selected').forEach(node => node.classList.remove('selected'));
    rect.classList.add('selected');    
  });

  container.addEventListener('dblclick', function(evt) {
    const rect = evt.target;
    if (rect === container) return;
    // edit the rect 
    rect.setAttribute('fill', `#${Math.floor(Math.random()*16777215).toString(16)}`);
  });

</script>

CSS

.selected {
  stroke: red;
  stroke-width: 3;
 }