是否可以在不中斷點擊事件的情況下重新排序子女onodouown

Question

我想在鼠標下方更改子元素的索引，但不會中斷點擊事件。這可能嗎？當事件mousedown和mouseup事件發生在一個和相同的元件被處理

<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事件。因此，當元素的順序發生變化時 - 它不會發生，並且不會調用事件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/