jQuery event.stopPropagation() 方法

实例

阻止单击事件冒泡到父元素:

<!DOCTYPE html>
<html>
<head>
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("span").click(function(event){
    event.stopPropagation();
    alert("span 元素被点击");
  });
  $("p").click(function(event){
    alert("p 元素被点击");
  });
  $("div").click(function(){
    alert("div 元素被点击");
  });
});
</script>
</head>
<body>
<div style="height:100px;width:500px;padding:10px;border:1px solid blue;background-color:lightblue;">
这是一个 div 元素
<p style="background-color:pink">这是一个 p 元素，在 div 元素中。<br><span style="background-color:orange">这是 p 和 div 元素中的一个 span 元素。</span></p></div>
<p><b>注意:</b> 单击上面的每个元素。单击 <b>div</b> 元素时，它会发出警告，表示该div元素已被单击。当点击<b>p</b>元素时，它将返回 p 和 div 元素，因为 p 元素位于 div 元素内部。
但是当点击 <b>span</b> 元素时，它只会返回自身，而不会返回 p 和 div 元素（即使它在这些元素中）。event.stopPropagation() 停止 click 事件冒泡到父元素。
</p>
<p><b>提示:</b> 尝试删除 event.stopPropagation() 行，然后再次单击 span 元素（单击事件现在将冒泡到父元素）。</p>
</body>
</html>

运行一下

定义与用法

event.stopPropagation() 方法停止向父元素冒泡事件，防止执行任何父事件处理程序。

提示: 使用 event.isPropagationStopped() 方法检查是否为事件调用了此方法。

语法

event.stopPropagation()

参数	描述
event	必填。event 参数来自事件绑定函数

jQuery event.stopPropagation() 方法

实例

定义与用法

语法

分类导航