如何防止父事件处理程序在 jQuery 中通过子元素单击执行？-js教程-PHP中文网

如何防止父事件处理程序在 jQuery 中通过子元素单击执行？

Barbara Streisand

发布： 2024-11-23 22:55:10

原创

678 人浏览过

How to Prevent Parent Event Handlers from Executing with Child Element Clicks in jQuery?

防止执行父级事件处理程序

在给定的 HTML 结构中，单击任何 div 元素都会触发其父级 div 的单击处理程序，导致意外行为。为了防止这种情况，我们可以使用 jQuery 禁用单击事件传播。

<div>

登录后复制

function func() {
   if ($(childId).hasClass("visible")){
    $(childId).removeClass("visible");
    $(childId).addClass("invisible");
}

登录后复制

要禁用单击事件传播，请向调用 stopPropagation() 方法的子元素添加事件处理程序：

function handler(event) {
    event.stopPropagation();
    // Custom code to execute for the child's click event
}

$('#a').add('#b').click(handler);

登录后复制

通过阻止事件传播，子元素（'#b'）的点击将不再触发父元素的点击处理程序（'#a'）。同样，对后代元素（“#c”）的点击不会传播到两个父元素（“#b”和“#a”）。

以上是如何防止父事件处理程序在 jQuery 中通过子元素单击执行？的详细内容。更多信息请关注PHP中文网其他相关文章！