防止Jquery中的輔助點擊操作

Question

我有一個列表，列表中的每個項目都有一個div。如果你點擊列表項，我希望它做一些事情（例如：alert（「點擊外部Div」）;），但我也想要一個動作，當我點擊列表中的div（例如：警報（「點擊）;

但是，當我單擊div時執行操作時，它還執行與緊跟在列表項後面的操作有關的操作。是否可以防止此行爲，以便只能單擊在股利顯示？

<ul id="coll-selected-list" class="droptrue sort-drop"> 
     <li class="sortedli"> 
      <div class="sel-display-on" style="display: inline; float:left; width: 30px;">xx</div> 
      Call Type 
     </li> 
</ul> 

$('.sel-display-on').click(function() { 
     alert("Clicked in Div"); 
    }); 
$('.sortedli').click(function() { 
     alert("Clicked outside Div"); 
    }); 

Answer 1

$('.sel-display-on').click(function (e) { 
    e.stopPropagation(); 
    alert("Clicked in Div"); 
}); 

點擊事件是冒泡和觸發當您單擊DIV列表項的Click事件。使用e.stopPropagation();抵消這種behavi要麼。

jsFiddle example