设置鼠标点击事件的顺序 JavaScript

Question

我有两个元素 - parent 和 child。两者都有点击事件处理程序。如果我点击 child 元素然后 both 事件处理程序运行 - parent 首先然后 child（至少在 Chrome 上）。我不知道浏览器如何确定运行事件的顺序，但有没有办法专门设置此顺序，以便 child 的点击事件发生在 [=24= 之前]的点击事件？

我找到了很多关于不同事件顺序（mousedown、click 等）的问题和答案，但找不到关于同一事件顺序的任何信息在不同的元素上。

Answer 1

您确定 parent 先运行吗？事件从最内层元素冒泡到最外层元素（您的 child 点击处理程序应该在您的 parent 之前触发）。来自 http://api.jquery.com/on/:

The majority of browser events bubble, or propagate, from the deepest, innermost element (the event target) in the document where they occur all the way up to the body and the document element. In Internet Explorer 8 and lower, a few events such as change and submit do not natively bubble

也就是说，如果您总是希望 parent 元素的行为先执行，您可以执行以下操作：

function runFirst(){
    alert("I should always run first");   
}

function runSecond(){
    alert("I should always run second");
}

$('body').on('click', '.parent', function(){

    runFirst();

}).on('click', '.child', function(event){

    runFirst();
    runSecond();

    event.stopPropagation();
});

这是一个 fiddle 行为演示：https://jsfiddle.net/8fxout3d/1/

设置鼠标点击事件的顺序 JavaScript

Set order of mouse click events JavaScript

javascript

events

event-handling

onmouseclick

dom-events