jquery点击事件停止传递

原创

mob64ca12eab427 2023-08-25 10:56:46 ©著作权

文章标签 点击事件事件传递 jQuery 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12eab427的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery点击事件停止传递

在前端开发中，我们经常会遇到需要处理点击事件的场景。有时候我们希望点击某个元素时，阻止事件的传递到其父元素或其他相关元素上。这时，我们可以使用jQuery的事件传递机制来实现这个功能。

事件传递机制

在介绍点击事件的停止传递之前，先来了解一下jQuery的事件传递机制。

在HTML中，元素按照层级关系形成了DOM（Document Object Model）树。当一个元素被点击时，点击事件会从被点击元素开始，沿着DOM树向上传递。这个过程叫做事件冒泡（Event Bubbling）。

当一个元素上的点击事件处理函数执行完毕后，如果没有阻止事件传递，点击事件会继续向上传递到父元素，然后再继续向上传递，直到传递到根元素（HTML元素）或者被阻止传递。

举个例子，假设有一个HTML结构如下：

<div id="outer">
  <div id="inner">
    <button id="btn">Click me</button>
  </div>
</div>

如果我们给按钮添加了一个点击事件处理函数，并在函数中打印一些信息：

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

当点击按钮时，事件会沿着DOM树向上传递，依次触发#btn、#inner和#outer上的点击事件处理函数，最后到达根元素。

阻止事件传递

在某些情况下，我们希望点击事件只在被点击元素上触发，不再继续向上传递。这时可以使用jQuery的stopPropagation方法来阻止事件传递。

stopPropagation方法可以在事件处理函数中调用，它会阻止事件继续传递到父元素或其他相关元素。

$("#btn").on("click", function(event) {
  event.stopPropagation();
  console.log("Button clicked");
});

在上面的代码中，调用event.stopPropagation()会停止事件传递，点击按钮时只会触发#btn上的事件处理函数，不会再继续传递到#inner或#outer上。

示例

下面是一个完整的示例，演示了如何使用stopPropagation方法阻止点击事件传递：

<div id="outer" style="background-color: lightblue;">
  <div id="inner" style="background-color: lightgreen;">
    <button id="btn" style="background-color: lightyellow;">Click me</button>
  </div>
</div>

<script src="
<script>
$("#outer").on("click", function() {
  console.log("Outer div clicked");
});

$("#inner").on("click", function() {
  console.log("Inner div clicked");
});

$("#btn").on("click", function(event) {
  event.stopPropagation();
  console.log("Button clicked");
});
</script>

在上面的代码中，当我们点击按钮时，控制台会依次打印出"Button clicked"。如果没有调用stopPropagation方法，还会继续打印"Inner div clicked"和"Outer div clicked"。