JQuery 单击 div 内

Question

我正在尝试在已经有单击事件的 li 内的 div 上添加单击事件。我不希望在 div 单击事件触发时触发 li 单击事件。

这是我正在尝试做的事情的jsfiddle。 http://jsfiddle.net/2srUd/5/

当我点击 .inside 时，我不希望触发 #outside 点击。我假设我需要向选择器 $(".inside") 添加一个 not

<script>
    $(document).ready(function() {

        $("#outside").click(function() {
            alert("outside click");
        });

        $(".inside").click(function() {
            alert("inside click");
        });

    });
</script>
<ul>
    <li id="outside" style="border:2px solid red; padding:20px;">
        <div class="inside" style="border:2px solid blue; ">Click This Div. I want to accept the inside click but not the outside click.</div>
    </li>
</ul>

Answer 1

简单修复:

    $(".inside").click(function(e) {
        e.stopPropagation();
        alert("inside click");
    });

http://api.jquery.com/event.stopPropagation/

Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

基本上，您不希望它触发父级的事件处理程序，因此您停止传播。