设置鼠标点击事件的顺序

Question

我有两个元素——父元素和子元素。两者都有单击事件处理程序。如果我点击子元素，那么两个事件处理程序运行-父母的第一个然后孩子的(至少在Chrome上)。我不知道浏览器如何确定运行事件的顺序，但是是否有一种方法可以专门设置此顺序，以便在父级单击事件之前发生子级单击事件?

我找到了很多关于不同事件(mousedown, click等)的顺序的问题和答案，但没有找到关于同一事件在不同元素上的顺序的任何东西

Answer 1

您确定父程序先运行吗?事件从最内层元素冒泡到最外层元素(子元素的click处理程序应该在父元素之前触发)。从http://api.jquery.com/on/:

大多数浏览器事件从文档中最深处、最内层的元素(事件目标)冒泡或传播，一直到主体和文档元素。在Internet Explorer 8及更低版本中，一些事件(如change和submit)不会自动显示

也就是说，如果你总是希望父元素的行为先执行，你可以这样做:

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();
});

下面是演示行为的小提琴:https://jsfiddle.net/8fxout3d/1/