是否可以在不中断点击事件的情况下对子onmousedown重新排序

Question

我想在鼠标按下时更改子元素的索引，但不中断click事件。 这可能吗？

<script>

function mouseDownHandler(event) {
    var p = event.currentTarget.parentNode;
    p.appendChild(event.currentTarget);

}
</script>

<div style="position: absolute; left: 50px; top: 100px; width: 50px; height: 100px; background-color: red;" onmousedown="mouseDownHandler(event)" onclick="console.log('click 1')">This is a test</div>


<div style="position: absolute; left: 70px; top: 100px; width: 50px; height: 100px; background-color: blue;" onmousedown="mouseDownHandler(event)" onclick="console.log('click')">This is a test</div>

https://jsfiddle.net/9d2dvcqj/

Answer 1

当事件mousedown和mouseup事件发生在同一元素上时，将处理Click事件。 因此，当元素的顺序改变时-它不会发生，并且click事件不会被调用。

一种解决方案-记住哪个元素是mousedown事件，并将其与mouseup事件的发生进行比较：

function mouseDownHandler(event) {
    var p = event.currentTarget.parentNode;
  mouseDownHandler.mde = event.currentTarget;
    p.appendChild(event.currentTarget);
}

function mouseUpHandler(event) {
  if (event.currentTarget === mouseDownHandler.mde) {
    document.body.innerHTML += 'click<br/>';
  } else {
    mouseDownHandler.mde = null;
  }
}

https://jsfiddle.net/nrd98ujr/