jQuery的单击事件只有当包裹元素点击

我有以下的html：jQuery的单击事件只有当包裹元素点击

<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”时提醒（this）（我这样做是为了让我可以更改div背景）。感谢

来源

2011-05-04 ShaneKm

您可以防止上的复选框，单击事件向上冒泡到父这样的：

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

You can try it here.

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

来源

2011-05-04 12:15:57 karim79

他想要它的另一种方式 - >绑定父母，不应触发子女 – JohnP 2011-05-04 12:18:38

这就是我回答。看演示。 – karim79 2011-05-04 12:20:38

烨加入此除了他的代码也将工作+1 – JohnP 2011-05-04 12:23:15

看着它，你需要调用父母？

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

但如果你想改变家长的div被点击复选框时：

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

[编辑] 对不起，我错阅读HTML。有一个“不”的功能，可以排除的元素：

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

被点击时在div任何东西，除了复选框这将触发。

来源

2011-05-04 12:17:42

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

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

查看working demo。

来源

2011-05-04 12:17:47 rahul

似乎没有工作 – JohnP 2011-05-04 12:24:28

检查目标是不是输入元素，然后只警报。

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

来源

2011-05-04 12:18:30 naiquevin

jQuery的单击事件只有当包裹元素点击

回答

相关问题