Question

我有一个列表，列表中的每个项目都有一个div。如果你点击列表项，我希望它做一些事情（例如：alert（“在Div之外点击”）;），但是当我点击列表中的div时我也想要一个动作（例如：alert（“Clicked”）在Div“）;。

但是，当我单击div时执行操作时，它还会立即执行与单击列表项相关的操作。是否可以防止此行为，以便仅显示Div中的Clicked？

<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();来抵消此行为。

<强> jsFiddle example

防止Jquery中的二次单击操作

1 个答案: