jQuery阻止事件冒泡

事件冒泡是指当一个元素上的事件被触发时，会从该元素开始逐层向上触发其父级元素的同类型事件，直到根元素。这种传递事件的机制有时会给页面带来一些不必要的问题，所以我们需要阻止事件冒泡。jQuery为此提供了多种方法，本篇文章将从多个方面对此进行详细阐述。

一、e.stopPropagation()

e.stopPropagation() 是一个函数，可以在事件处理过程中调用以停止事件传播，被阻止传播的事件不会再被分派到其它的节点上。例如：

<div id="outer">
  <div id="inner">Some text</div>
</div>

// 使用e.stopPropagation()阻止事件冒泡
$("#inner").click(function(e) {
  e.stopPropagation();
  console.log("Inner clicked");
});

$("#outer").click(function(e) {
  console.log("Outer clicked");
});

当点击 inner 元素时，console 中只会输出 “Inner clicked”，而不会输出 “Outer clicked”。通过调用 e.stopPropagation()，我们只阻止了事件在 inner 元素上的冒泡，因此没有触发外部元素上的 click 事件。

二、return false

在 jQuery 中，当事件处理函数返回 false 时，会同时调用 e.stopPropagation() 和 e.preventDefault()，阻止事件冒泡和默认行为。例如：

<div id="outer">
  <div id="inner">Some text</div>
</div>

// 使用return false阻止事件冒泡和默认行为
$("#inner").click(function() {
  console.log("Inner clicked");
  return false;
});

$("#outer").click(function() {
  console.log("Outer clicked");
});

当点击 inner 元素时，console 中只会输出 “Inner clicked”，而不会输出 “Outer clicked”。通过返回 false，我们同时阻止了事件在 inner 元素上的冒泡和默认行为，因此没有触发外部元素上的 click 事件。

三、bind 和 on 的区别

在 jQuery 中，bind() 和 on() 都可以用来绑定事件处理函数。但它们在阻止事件冒泡时有些许不同：

1. bind()

bind() 的使用方式类似于 addEventListener()，会在元素上添加一个处理函数。如果希望阻止事件冒泡，需要在处理函数内部使用 e.stopPropagation() 或返回 false。例如：

<div id="outer">
  <div id="inner">Some text</div>
</div>

// 使用bind()添加事件处理函数
$("#inner").bind("click", function(e) {
  e.stopPropagation();
  console.log("Inner clicked");
});

$("#outer").bind("click", function() {
  console.log("Outer clicked");
});

当点击 inner 元素时，console 中只会输出 “Inner clicked”，而不会输出 “Outer clicked”。通过调用 e.stopPropagation()，我们只阻止了事件在 inner 元素上的冒泡，因此没有触发外部元素上的 click 事件。

2. on()

on() 是 jQuery 新增的事件绑定方法，相比 bind() 更加强大。它可以绑定多个事件处理函数，多个事件用空格隔开。例如：

<div id="outer">
  <div id="inner">Some text</div>
</div>

// 使用on()添加事件处理函数
$("#inner").on("click", function(e) {
  e.stopPropagation();
  console.log("Inner clicked");
});

$("#outer").on("click", function() {
  console.log("Outer clicked");
});

当点击 inner 元素时，console 中只会输出 “Inner clicked”，而不会输出 “Outer clicked”。通过调用 e.stopPropagation()，我们只阻止了事件在 inner 元素上的冒泡，因此没有触发外部元素上的 click 事件。

四、delegate 和 on 的区别

在 jQuery 1.7 版本之前，delegate() 用于绑定事件处理函数。在 jQuery 1.7 版本之后，被 on() 取代。但它们在阻止事件冒泡时有些许不同：

1. delegate()

delegate() 的使用方式类似于 on()，可以绑定多个事件处理函数，多个事件用逗号隔开。如果希望阻止事件冒泡，需要在处理函数内部使用 e.stopPropagation() 或返回 false。例如：

<div id="outer">
  <div id="inner">Some text</div>
</div>

// 使用delegate()添加事件处理函数
$("#outer").delegate("#inner", "click", function(e) {
  e.stopPropagation();
  console.log("Inner clicked");
});

$("#outer").delegate("#outer", "click", function() {
  console.log("Outer clicked");
});

当点击 inner 元素时，console 中只会输出 “Inner clicked”，而不会输出 “Outer clicked”。通过调用 e.stopPropagation()，我们只阻止了事件在 inner 元素上的冒泡，因此没有触发外部元素上的 click 事件。

2. on()

on() 可以通过事件委托的方式来绑定事件处理函数，可以将事件处理函数绑定到父级元素上。如果希望阻止事件冒泡，需要在处理函数内部使用 e.stopPropagation() 或返回 false。例如：

<div id="outer">
  <div id="inner">Some text</div>
</div>

// 使用on()添加事件委托
$("#outer").on("click", "#inner", function(e) {
  e.stopPropagation();
  console.log("Inner clicked");
});

$("#outer").on("click", "#outer", function() {
  console.log("Outer clicked");
});

当点击 inner 元素时，console 中只会输出 “Inner clicked”，而不会输出 “Outer clicked”。通过调用 e.stopPropagation()，我们只阻止了事件在 inner 元素上的冒泡，因此没有触发外部元素上的 click 事件。