jQuery - on（）函数，当div被点击时，但不是当div的孩子被点击 [英] jQuery - on() function when a div is clicked, but not when a child of that div is clicked

问题描述

我有一个大的矩形父div，里面有很多子div。我有一个on（点击）函数，当父div被点击时运行，但默认情况下，它也运行时，父div中的任何东西被点击（包括子）。

I have one large rectangular parent div inside which there are many child divs. I have an on(click) function that runs when the parent div is clicked, but by default it also runs when anything within the parent div is clicked (including the children).

但是，我不希望在单击父项的一个特定子项时运行on（点击）函数。我如何做一个选择器选择父div和其中的一切除了这一个孩子？

However, I don't want the on(click) function to run when one specific child of the parent is clicked. How do I make a selector that selects the parent div and everything in it apart from this one child?

感谢。

<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>

现在，这全部在boxdiv中，演示此处发生的情况。如果您在点击框后点击upvote按钮，那么这是我现在想使用的代码，但它不工作：

Now, this is all within the 'box' div and you can see a demo of what happens here. If you click the upvote button after having already clicked on a box, then the thing slides back down which I don't want it to. This is the code I'm trying to use right now for this but it's not working:

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

推荐答案

工作小提琴

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

这篇关于jQuery - on（）函数，当div被点击时，但不是当div的孩子被点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！