防止Jquery中的二次點擊操作

Question

我有一個列表，列表中的每個項目都有一個div。 如果您單擊列表項，則希望它執行某項操作（例如：alert（“在Div外部單擊）；），但是當我單擊列表中的div時，我還想要一個動作（例如：alert（” Clicked分部”）；。

但是，當我單擊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時，單擊事件冒泡並觸發列表項上的單擊事件。 使用e.stopPropagation(); 以抵消這種行為。

jsFiddle示例