防止在 Jquery 上触发父事件

Posted 2023-05-09

【中文标题】防止在 Jquery 上触发父事件

【英文标题】：Prevent parent event fire on Jquery

【发布时间】：2014-09-17 04:34:01

【问题描述】：

我的代码中有一个非常烦人的问题。

当我更改复选框状态时，它的父级的单击事件也会触发。 我尝试了不同的方法来解决这个问题，例如：

event.stopImmediatePropagation(); event.stopPropagation(); event.preventDefault(); return false

不幸的是，没有人为 be 工作（可能与“事件传播”问题无关）。如何使 ('.sortable').click 在复选框更改时不被解雇？

HTML

<div class="sortable">
    <span>Hello all!</span><br />
    <label>Click on me<input type="checkbox" checked="checked" /></label>
</div>

jQuery

$(function()
    $('.sortable input[type=checkbox]').change(function(event)
        event.stopImmediatePropagation();
        event.stopPropagation();
        event.preventDefault();
        alert('checkbox changed');
    );

    $('.sortable').click(function()
        alert('sortable clicked');
    );
);

您可以在以下位置找到代码：Demo

【问题讨论】：

你在这里处理两种不同的类型事件——你不能“取消”冒泡的click事件是很自然的父元素，当您只处理复选框上的 change 事件时。

复选框上的第一个事件也需要是click 事件。

【参考方案1】：

当您将点击事件绑定到父 div 时，它也会触发该事件。您可以在父单击事件句柄中检查“目标元素如果不是复选框”条件，如下所示

$('.sortable').click(function(event)
        if(event.target.type!="checkbox")
        console.log('sortable clicked');
    );

Demo

【参考方案2】：

因为您正在停止传播 .change() 事件并处理 .click() 事件

尝试改变：

$('.sortable input[type=checkbox]').change(function(event) ... );

到：

$('.sortable input[type=checkbox]').click(function(event) ... );

希望对你有帮助！

这是一个工作示例：http://fiddle.jshell.net/vjKGv/

【讨论】：

找到自己了吗？至少 Chrome 浏览器会在空间上触发 click 事件。

【参考方案3】：

我对@9​​87654321@做了一些研究

$(function()

    $('.sortable').click(function(e)
        e.preventDefault();
        console.log('sortable clicked');
    );
    $('.sortable input[type=checkbox]').click(function(event)
        //event.stopImmediatePropagation();
        event.stopPropagation();
        //event.preventDefault();
        console.log('checkbox changed');
    );
);