javascript - 防止 Jquery 中的二次点击操作

Question

我有一个列表，列表中的每一项都有一个 div。如果您单击列表项，我希望它执行某些操作(例如:alert("Clicked outside Div");)，但是当我单击列表中的 div 时我也想要一个操作(例如:alert("Clicked在 Div");.

但是，当我单击 div 时执行操作时，它还会立即执行与单击列表项相关的操作。是否可以防止这种行为，以便只显示 Clicked in 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 example