仅当单击包装元素时，jquery单击事件

I have the following html:

我有以下html：

<ul class="treeList2">
<li class="topLevel marked checked"><div class="tlWrap clearfix"><input type="checkbox" checked="checked" class="checkbox"><strong>Level name here blah blah   <span>(3)</span></strong></div></li>

...

<script type="text/javascript">
/*<![CDATA[*/
    $(function(){           

        $('.treeList2 li.topLevel .tlWrap').click(function(){
            alert(this);
        });
    });
/*]]>*/
</script>

The problem is that this fires when I click the checkbox (which i don't want). I Only want to alert(this) when the 'div' is clicked (I do this so that I can change the div background). thanks

问题是，当我单击复选框（我不想要）时，会触发此问题。我只想在点击'div'时提醒（这个）（我这样做以便我可以改变div背景）。谢谢

4 个解决方案

#1

You can prevent the click event on the checkbox from bubbling up to the parent like this:

您可以阻止复选框上的click事件冒泡到父级，如下所示：

$('.checkbox').click(function(e){
    e.stopPropagation();
});

You can try it here.

你可以在这里试试。

See http://api.jquery.com/event.stopPropagation/

见http://api.jquery.com/event.stopPropagation/

#2

check if the target is not input element and then only alert.

检查目标是否不是输入元素，然后仅警告。

$(function(){   
        $('.treeList2 li.topLevel .tlWrap').click(function(e){
            if (e.target.nodeName !== 'INPUT') {
                alert(this);
            }               
        });
});

#3

Looking at it, you need to call the parent?

看着它，你需要打电话给父母吗？

$('.treeList2 li.topLevel .tlWrap').parent().click( ...

Although if you want to change the parent div when the checkbox is clicked:

虽然如果要在单击复选框时更改父div：

$('.treeList2 li.topLevel .tlWrap').click(function(){
  $(this).parent().css('background-color','red');
});

[edit] Sorry, I mis-read the html. There's a 'not' function that you can exclude elements with:

[编辑]抱歉，我误读了HTML。有一个'not'功能，你可以用以下内容排除元素：

$('.treeList2 li.topLevel .tlWrap').not('input').click( ...

This will fire when anything in the div is clicked on, except the checkbox.

当单击div中的任何内容时，将触发此操作，但复选框除外。

#4

You can check whether the element that triggered the event (e.target) has a class of tlWrap.

您可以检查触发事件的元素（e.target）是否具有tlWrap类。

$(function(){
        $('.treeList2 li.topLevel .tlWrap').click(function(e){
            if($(e.target).hasClass("tlWrap")) {            
               alert(this);
            }
        });
});

See a working demo.

查看工作演示。

#1