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

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

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

<div>

當子div「b」上的點擊事件觸發事件處理程式時，就會出現問題父級div“a”，導致“b”及其子級“c”變得不可見。這是不受歡迎的行為，因為它會幹擾子元素的預期功能。

解決方案：

為了防止這種級聯效應，我們可以利用jQuery 的stopPropagation()當子元素被執行時禁用父事件處理程序的執行的方法clicked:

function handler(event) {
    event.stopPropagation();
    // Now do your stuff
}
$('#a').add('#b').click(handler);

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

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

以上是在點擊分層 HTML Div 中的子元素時如何防止父事件處理程序觸發？的詳細內容。更多資訊請關注PHP中文網其他相關文章！