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

Question

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

<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/