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

Question

我有一个列表，列表中的每个项目都有一个 div。如果您单击列表项，我希望它执行某些操作（例如： alert("Clicked outside Div"); ），但我还希望在单击列表中的 div 时执行操作（例如：alert("Clicked在 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 时，您的单击事件会冒泡并触发列表项上的单击事件。用于e.stopPropagation();抵消这种行为。

jsFiddle 示例