crbug716694: click/dblclick target for re-attached element

https://bugs.chromium.org/p/chromium/issues/detail?id=716694

by Roman Bruckner

HTML

<ul>
  <li><b>mousedown</b> to bring a rectangle to front and start dragging</li>
  <li><b>click</b> to select a rectangle</li>
  <li><b>dblclick</b> to edit a rectangle</li>
</ul>
<svg id="container" width="500" height="400">
  <text x="50" y="50" fill="blue">test1</text>
  <text x="100" y="100" fill="green">test2</text>
</svg>

CSS

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

JavaScript

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    
		
    // This re-attach the element and break the click and dbclick
    // Try to comment this out.
    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> / change its color
    rect.setAttribute('fill', `#${Math.floor(Math.random()*16777215).toString(16)}`);
  });