小编典典

如何停止复选框上的事件冒泡

javascript

我有一个复选框,希望对click事件执行一些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="http://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;

阅读 584

收藏
2020-05-01

共1个答案

小编典典

更换

event.preventDefault();
return false;

event.stopPropagation();

event.stopPropagation()

停止将事件冒泡到父元素,从而防止任何父处理程序收到该事件的通知。

event.preventDefault()

阻止浏览器执行默认操作。使用isDefaultPrevented方法可以知道是否曾经(在该事件对象上)调用过此方法。

2020-05-01