在div中触发JQuery Click事件

Question

我正在尝试在li内部具有单击事件的div上添加单击事件。当div单击事件被触发时，我不希望li单击事件被触发。

这里是我要做的jsfiddle链接: http://jsfiddle.net/2srUd/5/ 当我点击.inside时，我不想让#outside的单击事件触发。我认为我需要向选择器$(".inside")添加否定。

<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>

- Joel

Answer 1

简单修复：

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

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

阻止事件冒泡到DOM树，防止通知任何父处理程序事件的发生。 基本上，您不希望触发父级的事件处理程序，因此停止传播。

- user1508519

---

这对我不起作用，只有外部div会生成事件。唯一的区别是我的外部div是一个类名而不是一个id，如果有任何变化，请告诉我 <div class ='outer'> <div class ='inner'> a </div> <div class ='inner'> b </div> </div> - djack109

Answer 2

只需要执行以下代码：http://jsfiddle.net/2srUd/24/

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

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

    });

- Milson