jQuery-单击div时的on（）函数，但单击该div的子级时不

Question

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

但是，我不希望在单击父级的一个特定子级时运行on（click）函数。 我如何制作一个选择器来选择父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中，您可以在此处看到演示情况。 如果您在单击一个框后单击了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

工作小提琴

$("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();
});

演示