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

当事件Click和mousedown事件发生在同一个元素上时，会处理

mouseup事件。因此，当元素的顺序发生变化时 - 它不会发生，并且不会调用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/

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

1 个答案: