Question

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

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

提前致谢！

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/

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

1 个答案: