如何停止事件冒泡复选框点击

我有一个复选框，我想在单击事件上执行一些Ajax操作，但是复选框也在一个容器中，它有自己的单击行为，我不想在单击复选框时运行。这个示例说明了我想做的事情:

$(document).ready(function() { $('#container').addClass('hidden'); $('#header').click(function() { if ($('#container').hasClass('hidden')) { $('#container').removeClass('hidden'); } else { $('#container').addClass('hidden'); } }); $('#header input[type=checkbox]').click(function(event) { // Do something }); }); #container.hidden #body { display: none; } <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <div id="container"> <div id="header"> <h1>Title</h1> <input type="checkbox" name="test" /> </div> <div id="body"> <p>Some content</p> </div> </div>

然而，我不知道如何停止事件冒泡而不导致默认的单击行为(复选框成为选中/未选中)不运行。

以下两种方法都会停止事件冒泡，但也不会改变复选框状态:

event.preventDefault();
return false;

当前回答

代码由@mehras提供。我只是创建了一个代码片段来演示它，因为我认为这会受到赞赏，并且我想找个借口来尝试该功能。

$(document).ready(function() { $('#container').addClass('hidden'); $('#header').click(function() { if ($('#container').hasClass('hidden')) { $('#container').removeClass('hidden'); } else { $('#container').addClass('hidden'); } }); $('#header input[type=checkbox]').click(function(event) { if (event.stopPropagation) { // standard event.stopPropagation(); } else { // IE6-8 event.cancelBubble = true; } }); }); div { text-align: center; padding: 2em; font-size: 1.2em } .hidden { display: none; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="header"><input type="checkbox" />Checkbox won't bubble the event, but this text will.</div> <div id="container">click() bubbled up!</div>

2017-04-19 20:39:13

其他回答

使用stopPropagation方法:

event.stopPropagation();

2009-07-22 10:06:20

别忘了IE:

if (event.stopPropagation) {    // standard
        event.stopPropagation();
    } else {    // IE6-8
        event.cancelBubble = true;
}

2012-12-16 09:50:19

在angularjs中，这应该是有效的:

event.preventDefault(); 
event.stopPropagation();

2017-05-22 09:08:43

代码由@mehras提供。我只是创建了一个代码片段来演示它，因为我认为这会受到赞赏，并且我想找个借口来尝试该功能。

$(document).ready(function() { $('#container').addClass('hidden'); $('#header').click(function() { if ($('#container').hasClass('hidden')) { $('#container').removeClass('hidden'); } else { $('#container').addClass('hidden'); } }); $('#header input[type=checkbox]').click(function(event) { if (event.stopPropagation) { // standard event.stopPropagation(); } else { // IE6-8 event.cancelBubble = true; } }); }); div { text-align: center; padding: 2em; font-size: 1.2em } .hidden { display: none; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="header"><input type="checkbox" />Checkbox won't bubble the event, but this text will.</div> <div id="container">click() bubbled up!</div>

2017-04-19 20:39:13

这里有一个对我有用的技巧:

handleClick = e => {
    if (e.target === e.currentTarget) {
        // do something
    } else {
        // do something else
    }
}

解释:我把handleClick附加到一个模式窗口的背景，但它也在模式窗口内的每次点击(因为它是在背景div)。所以我添加了条件(e.target === e.currentTarget)，这只在单击背景时才会实现。

2020-10-23 10:24:55

如何停止事件冒泡复选框点击

推荐文章

最新文章

标签