Question

<div class="toggle-bar">
    <h3><input type="checkbox" class="select-all"> Title</h3>
</div>

<div class="content">
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
</div>

当我点击.toggle-bar时，toggle()会触发.content。但是，如果我选中复选框，如何阻止toggle()？

我尝试了以下但不适合我：

$(".toggle-bar").click(function() {
    $(this).next(".content").toggle();
}).children(".select-all").click(function(e) {
    e.stopPropagation();
});

Answer 1

在子元素点击事件中使用-> OK Successfully installed Inline-0.80 Installing C:\Dwimperl\perl\site\lib\MSWin32-x86-multi-thread\.meta\Inline-0.80\install.json Installing C:\Dwimperl\perl\site\lib\MSWin32-x86-multi-thread\.meta\Inline-0.80\MYMETA.json Configuring Device-USB-0.36 Running Makefile.PL ERROR: Missing required environment variables to compile under Windows. LIBUSB_LIBDIR should contain the path to the libusb libraries LIBUSB_INCDIR should contain the path to the libusb include files -> N/A -> FAIL Configure failed f以防止父点击。

stopPropagation

Answer 2

您可以使用stopPropagation()

捕获事件并停止传播

$(".toggle-bar").click(function() {
  $(this).next(".content").toggle();
});
$(".select-all").click(function(e) {
  e.stopPropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="toggle-bar">
  <h3><input type="checkbox" class="select-all"> Title</h3>
</div>

<div class="content">
  <p>lorem ipsum</p>
  <p>lorem ipsum</p>
</div>

Answer 3

您可以检查事件目标元素类名是否为“select-all”，如果是，则返回void。

您可以将代码更改为这样......

<div id="toggle-bar" class="toggle-bar">
    <h3><input type="checkbox" class="select-all"> Title</h3>
</div>

JavaScript看起来像这样......

$(".toggle-bar").click(function(event) {
    var target = event.target || event.srcElement;

    if (target.className === 'select-all') {
        return;
    }

    $(this).next(".content").toggle();
});

带有click事件的容器内的复选框

3 个答案: