触发子元素的点击事件，但不触发父元素的。

Question

我有一些嵌套的元素，每个元素都有一个onclick事件。在大多数情况下，当用户点击子元素时，我希望两个事件都会触发（父元素和子元素的事件都会触发 - 默认行为）。然而，至少有一种情况，我想触发子元素的onclick事件（来自Javascript，而不是用户的点击），但不想触发父元素的。如何防止这种情况触发父元素事件？

我想要的是：

用户点击A：A的onclick事件触发。
用户点击B：B的onclick事件触发，A的onclick事件也触发。
手动触发B的点击：B触发，A不触发（这是问题所在）。

- yoozer8

Answer 1

方法一：

您可以使用stopPropagation()方法来防止事件冒泡。

$('.element').on('click', function(e){
e.stopPropagation();
});

请查看这个示例

方法二：

您可以使用return false来防止事件冒泡，这也将阻止默认操作。

$('.element').on('click', function(e){
//--do your stuff----
return false;
});

- Ĭsααc tիε βöss

Answer 2

在子元素上使用 triggerHandler，这样可以防止事件通过DOM传播:

.triggerHandler() 创建的事件不会冒泡到DOM层次结构中; 如果它们不能直接被目标元素处理，它们将什么也不做。

- Jon

---

正是我所需要的！我有点惊讶它没有出现在我的任何搜索中。 - yoozer8

.triggerHandler('click')在Safari中无法正常工作。有没有适用于Safari的解决方法？ - Shabnam K

@Shab，你可以使用stopPropagation()。请看我的回答。 - Ĭsααc tիε βöss