JQuery event.stopPropagation()用法及代码示例

event.stopPropagation()方法是jQuery中的内置方法，用于停止窗口传播。在DOM树中，同时设置带有子元素和父元素的事件时，如果您点击了子元素事件，它将同时调用子元素和父元素。因此，借助此方法，该弹出窗口将不会出现在选定元素以外的其他元素上。

用法:

event.stopPropagation()

参数：它接受强制的单个参数。此参数来自绑定函数。

返回值：此方法返回通过stopPropagation()方法进行指定更改的所选元素。

例：本示例说明event.stopPropagation()方法。

<!DOCTYPE html> 
<html> 
   
<head> 
    <title> 
        jQuery event.stopPropagation() Method 
    </title> 
      
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
      
    <style> 
        .main { 
            border:1px solid green; 
            padding:20px; 
            width:60%; 
        } 
    </style> 
      
    <!-- Script to use jQuery event.stopPropagation() Method -->
    <script> 
        $(document).ready(function() { 
            $(".main").click(function() { 
                alert("Main div element"); 
            }); 
            $(".GFG").click(function(event) { 
                event.stopPropagation(); 
                alert("Nested div element"); 
            }); 
            $(".geeks").click(function(event) { 
                alert("Second nested div element"); 
            }); 
        }); 
    </script> 
</head> 
   
<body> 
      
    <!-- Click on element to display alert message -->
    <div class="main"> 
        GeeksforGeeks 
        <div class="GFG"> 
            A computer science portal 
            <div class="geeks"> 
                Welcome to GeeksforGeeks 
            </div> 
        </div> 
    </div> 
   
</body> 
   
</html>

输出：

单击按钮之前：
单击按钮后：

相关用法

注：本文由纯净天空筛选整理自Sruti Rai大神的英文原创作品 jQuery | event.stopPropagation() Method。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。