单击分层 HTML Div 中的子元素时如何防止父事件处理程序触发？

防止在分层 HTML Div 中执行父事件处理程序

使用分层 HTML 元素时，一个常见问题是可能存在子元素触发其父元素中的事件处理程序。在以下场景中，创建了一个 div 树，每个 div 都有一个 onclick 事件，使其子级不可见：

<div>
<p>当子 div“b”上的单击事件触发事件处理程序时，就会出现问题父级 div“a”，导致“b”及其子级“c”变得不可见。这是不受欢迎的行为，因为它会干扰子元素的预期功能。</p>
<p><strong>解决方案：</strong></p>
<p>为了防止这种级联效应，我们可以利用 jQuery 的 stopPropagation()单击子元素时禁用父事件处理程序执行的方法：</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”将保持可见。

此技术提供了对分层结构内事件传播的精确控制，允许开发人员自定义内部各个元素的行为复杂的界面。