javascript - 设置鼠标点击事件的顺序javascript

Question

我有两个元素 - 父母和孩子。两者都有点击事件处理程序。如果我单击子元素，那么两个事件处理程序都会运行 - 父母的第一个然后是孩子的（至少在 chrome 上）。我不知道浏览器如何确定运行事件的顺序，但是有没有办法专门设置这个顺序，以便孩子的点击事件发生在父母的点击事件之前？

我找到了很多关于不同事件（鼠标按下、单击等）顺序的问题和答案，但找不到关于不同元素上相同事件顺序的任何信息。

提前致谢！

Answer 1

你确定父母先跑吗？事件从最里面的元素冒泡到最外面的元素（您的子点击处理程序应该在您的父级之前触发）。来自http://api.jquery.com/on/：

大多数浏览器事件冒泡或传播，从文档中最深、最里面的元素（事件目标）一直到正文和文档元素。在 Internet Explorer 8 及更低版本中，一些事件（例如更改和提交）本身不会冒泡

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

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/