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

在某种情况下，我希望触发其父元素中的事件，而不是在其子元素上点击时触发其子元素中附加的事件。我知道可以通过对子元素进行一些调整来解决这个问题，但我不想更改由第三方插件附加的子元素中的事件。

- Dhiru

---

event.stopPropagation(); - D4V1D

所以你只想触发父事件，即使子元素被点击了对吧？ - Jan.J

是的，我希望先触发父级，然后再触发它的子级。 - Dhiru

Answer 1

您不能将父事件的优先级设置为优先于元素事件执行。如果两个事件附加在同一对象上，则它们将按相同顺序执行。

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

但是，您可以使用stopPropagation在子元素事件中防止事件冒泡（停止父事件传播到子事件）。

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

演示链接

（相关IT技术）

- Milind Anantwar

---

你所做的是对子元素进行了一些调整，这不是我想要的。 - Dhiru

@Dhiru 不是在插件的处理程序中，而是可以添加一个新的处理程序。 - Arun P Johny

@Dhiru：你可以简单地编写另一个带有stopPropagation的处理程序。 - Milind Anantwar

@Milind，如果我在父级中写入stopPropagation，那么已经在其子元素上附加的事件仍然会运行。 - Dhiru

不不不……你不应该在父事件中添加那部分代码。而且你也不能先触发父事件。请查看更新后的答案。 - Milind Anantwar

Answer 2

由于事件冒泡的原因，您需要使用e.stopPropagation()方法来停止这种情况。

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

- Sumanta736

Answer 3

既然您不想在子处理程序中进行更改，那么一个选项是检查事件的目标是否在子元素内部。

$('.parent').on('click', function(e) {
  if (!$(e.target).closest('.children').length) {
    $('.result').append('<p>Parent Clicked</p>');
  }
});
$('.children').on('click', function() {
  $('.result').append('<p>Child Clicked</p>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">Parent
  <div class="children">Child</div>
</div>
<div class="result">Result here</div>

---

另一个选择是使用事件委托并停止事件传播。

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">Parent
  <div class="children">Child</div>
</div>
<div class="result">Result here</div>

- Arun P Johny