Question

我有一个大的矩形父div，里面有很多子div。我有一个on（click）函数，它在单击父div时运行，但默认情况下它也会在单击父div中的任何内容时运行（包括子项）。

但是，我不希望在单击父级的一个特定子级时运行on（单击）功能。除了这个孩子之外，我如何创建一个选择父div和其中所有内容的选择器？

由于

<div class="box"">

<div class="overlay"><div id="text"></div></div>
<div class="slide">
    <div class="slideleft"></div>
    <div class="slideright">
        <span class="upvote">Upvote</span>
        <span class="counter"></span>
    </div>
</div>

</div>

现在，这都在'box'div内，您可以看到here发生的事情的演示。如果您在单击一个框后单击upvote按钮，那么该东西会向下滑动，我不希望它。这是我现在正在尝试使用的代码，但它不起作用：

$("body").on("click", ".box", function(e){
        if(e.target.class == 'upvote') {
            return false;
        } else {
                $(this).children('.slide').slideToggle(150);
                $(this).children('overlay').css('background-color', 'rgba(0,0,0,0)');
            }
});

Answer 1

Working Fiddle

$("body").on("click", ".box", function (e) {
if (e.target.className != 'upvote') {
  $(this).children('.slide').slideToggle(150);
  $(this).children('.overlay').css('background-color', 'rgba(0,0,0,0)');
}
});

Answer 2

你可以这样做：

$('.child').on('click', function(e){
   e.stopPropagation();
});

<强> Demo

jQuery - 单击div时的on（）函数，但是当单击该div的子节点时则不行

2 个答案: