jQuery:处理背景/容器点击

Question

我有一个大 div，div 内有一个小按钮。

当点击 div 时，我希望它执行某些操作。
单击按钮时，我希望它执行其他操作。

$('#myDiv').click(OnDivClicked);
$('#myButton').click(OnButtonClicked);

当前，当单击按钮时，OnDivClicked 和 OnButtonClicked 都会被触发。

如何防止 OnDivClicked 在单击按钮时被触发？

提前致谢。

Answer 1

您需要使用event.stopPropagation()来防止点击冒泡。 ，像这样:

$('#myButton').click(function(e) {
  OnButtonClicked();
  e.stopPropagation();
});

默认情况下，许多事件冒泡到它们的父事件一直到 DOM 根，导致相同事件类型的事件处理程序被触发......要停止这种情况，您只需像上面的代码那样停止冒泡行为。如果您不需要发生默认操作，return false; 也可以完成此操作。

e.StopPopagation() 和 return false; 之间的区别在 anchor 方面更为重要，仅阻止气泡不会 触发父级的 click 处理程序，但会跟随链接，而 return false 则两者都不会。