在點擊分層 HTML Div 中的子元素時如何防止父事件處理程序觸發？

防止在分層HTML Div 中執行父事件處理程序

使用分層HTML 元素時，一個常見問題是可能存在子元素觸發其父元素中的事件處理程序。在以下場景中，建立了一個div 樹，每個div 都有一個onclick 事件，使其子級不可見：

<div>
<p>當子div「b」上的點擊事件觸發事件處理程式時，就會出現問題父級div“a”，導致“b”及其子級“c”變得不可見。這是不受歡迎的行為，因為它會幹擾子元素的預期功能。 </p>
<p><strong>解決方案：</strong></p>
<p>為了防止這種級聯效應，我們可以利用jQuery 的stopPropagation()當子元素被執行時禁用父事件處理程序的執行的方法clicked:</p>
<pre class="brush:php;toolbar:false">function handler(event) {
    event.stopPropagation();
    // Now do your stuff
}
$('#a').add('#b').click(handler);

透過將此事件處理程序新增至父級div“a”和子級div“b”，我們確保對子級“b”的點擊將不再向上傳播DOM並觸發父級事件處理程序。因此，點擊“b”後，“b”和“c”將保持可見。

此技術提供了對分層結構內事件傳播的精確控制，允許開發人員自訂內部各個元素的行為複雜的介面。