jQuery event.isImmediatePropagationStopped() 方法



jQuery 的event.isImmediatePropagationStopped() 方法用于检查是否曾经在此事件对象上调用过event.stopImmediatePropagation()

如果已经调用了 jQuery event.stopImmediatePropagation() 方法,则此方法返回布尔值“true”,否则返回“false”。

语法

以下是 jQuery event.isImmediatePropagationStopped() 方法的语法:

event.isImmediatePropagationStopped() 

参数

  • 此方法不接受任何参数。

返回值

如果已经调用了 event.stopImmediatePropagation() 方法,则此方法返回“true”,否则返回“false”。

示例 1

如果已经调用了event.stopImmediatePropagation() 方法,则此方法返回“true”

以下是 jQuery event.isImmediatePropagationStopped() 方法的基本示例:

<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
      <style>
        div{ 
            margin:10px;
            padding:12px; 
            border:2px solid #666; 
            width:160px;
            color: white;
        }
      </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());
            event.stopImmediatePropagation();
            alert("Is immediate propagation stopped? " + event.isImmediatePropagationStopped());
        });	
    });
      </script>
   </body>
</html>

输出

上述程序显示两个嵌套的 div 元素。当单击一个 div 时,弹出窗口会指示单击了哪个 div。弹出窗口还会显示“true”,如果已调用 event.stopImmediatePropagation(),则表示事件传播已被停止。


示例 2

如果在事件处理程序上没有调用event.stopImmediatePropagation(),则event.isImmediatePropagationStopped()方法将返回“false”。

<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
      <style>
        div{ 
            margin:10px;
            padding:12px; 
            border:2px solid #666; 
            width:160px;
            color: white;
        }
      </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());
            //event.stopImmediatePropagation();
            alert("Is immediate propagation stopped? " + event.isImmediatePropagationStopped());
        });	
    });
      </script>
   </body>
</html>

输出

执行上述程序后,将显示两个嵌套的 div 和一个按钮元素。单击任何 div 时,都会显示消息,指示单击了哪个 div。如果单击按钮,“false”将被打印。


jquery_ref_events.htm
广告