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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。