jQuery event.stopPropagation() 方法

jQuery 的event.stopPropagation() 方法阻止事件冒泡到父元素，防止任何父元素的处理程序收到事件通知。这意味着当触发事件时，它不会传播到父元素，从而防止任何父事件处理程序执行。

您可以使用方法 event.isPropagationStopped() 来了解此方法是否曾经被调用（在该事件对象上）。

语法

以下是 jQuery event.stopPropagation() 方法的语法：

event.stopPropagation()

参数

此方法不接受任何参数。

返回值

此方法不返回值。

示例 1

以下程序演示了 jQuery event.stopPropagation() 方法的使用：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        div{
            width: 200px;
            padding: 20px;
        }
    </style>
</head>
<body>
   <p>Click on any box to see the effect:</p>
   <div id="div1" style="background-color:blue;">
       OUTER BOX
       <div id="div2" style="background-color:red;">
             INNER BOX
      </div> 
  </div>
  <script>
  $(document).ready(function() {
    $("div").click(function(event){
        alert("This is : " + $(this).text()); // Comment the following to see the difference
        event.stopPropagation();
    });
});
  </script>
</body>
</html>

输出

以上程序显示了一个嵌套的 div 元素，其中包含一些文本。当我们点击任何一个 div 时，都会出现一个相应的弹出警报，指示点击了哪个 div：

示例 2

使用event.isPropagationStopped() 方法以及event.stopPropagation() 方法来检查此方法是否曾经被调用：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        div{
            width: 200px;
            padding: 20px;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
        }
    </style>
</head>
<body>
   <p>Click on any box to see the effect:</p>
   <div id="div1" style="background-color:rgb(69, 238, 100);">
       Outer Div 
       <div id="div2" style="background-color:rgb(13, 138, 13);">
             INNER Div
      </div> 
  </div>    
  <p>Click on the below button to check whether propagation stopped or not.</p>
  <button>Check</button><span></span>
  <script>
  $(document).ready(function() {
    $("div").click(function(event){
        $('span').text("This is : " + $(this).text());
        event.stopPropagation();
        $('button').click(function(){
            if(event.isPropagationStopped()){
                $('span').text("Is propagation stopped? " + event.isPropagationStopped());
            }
            else{
                $('span').text("Is propagation stopped? " + event.isPropagationStopped());
            }
        });
    });
});
  </script>
</body>
</html>

输出

执行以上程序后，会显示两个嵌套的 div 和一个按钮元素。当点击任何一个 div 时，都会显示消息，指示点击了哪个 div。如果点击了按钮，则会打印“true”：

jquery_ref_events.htm

打印页面