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的單擊事件只有當包裹元素點擊

回答

相關問題