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

【问题标题】：Set order of mouse click events JavaScript设置鼠标点击事件的顺序 JavaScript
【发布时间】：2015-07-08 22:35:22
【问题描述】：

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

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

【问题讨论】：

默认情况下，孩子的点击事件应该先发生。

标签： javascript events event-handling dom-events onmouseclick

【解决方案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/

【讨论】：