Question

我有以下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>

问题是当我点击复选框（我不想要）时会激活。 我只想在点击'div'时提醒（这个）（我这样做以便我可以更改div背景）。感谢

Answer 1

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

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

You can try it here.

请参阅http://api.jquery.com/event.stopPropagation/

Answer 2

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

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

Answer 3

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

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

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

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

[编辑] 对不起，我误读了HTML。有一个'not'函数可以用以下内容排除元素：

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

除了复选框之外，点击div中的任何内容时会触发。

Answer 4

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

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

查看working demo。

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

4 个答案: