javascript - jQuery 触发事件首先附加在子项上，然后是其父项的事件

Question

附加在子项上的事件比它的父项先触发，我认为它的默认行为，无论如何它可以以替代方式工作吗？

这是一个工作示例:http://jsfiddle.net/dhiru/rb99n7uh/4/

<div class="parent">Parent
    <div class="children">Child</div>
</div>
<div class="result">Result here</div>

$('.parent').on('click', function () {
    $('.result').append('<p>Parent Clicked</p>');
});
$('.children').on('click', function () {
    $('.result').append('<p>Child Clicked</p>');
});

在某种情况下，我想触发附加在其父事件中的事件，而不是其子事件中的事件，甚至点击了子事件。我知道可以通过对子元素进行一些调整来修复它，但我不想更改其子元素中附加的事件，因为它是由第 3 方插件附加的。

Answer 1

您不能优先执行父事件而不是元素事件。如果事件附加到同一个对象，那么它们将以相同的顺序执行。

但是你的情况不是这样的。第一个事件附加到父元素，另一个事件附加到元素本身。在这种情况下，首先执行的第一个事件是事件开始的地方，在您的情况下是子元素。而且您无法覆盖此行为。

但是，您可以在子元素事件中使用 stopPropagation 来防止事件冒泡(以停止父事件传播到子元素):

$('.children').on('click', function (e) {
 e.stopPropagation()
 $('.result').append('<p>Child Clicked</p>');
});

Working Demo