javascript - jQuery - 点击父级是从子级继承的

Question

我的情况是:

<div class="overlay">
<div class="modal"></div>
</div>

现在我想要点击覆盖它隐藏 .overlay 和 .modal div，所以:

$('.overlay').on('click',function(){
$(this+',.modal').hide();
});

它可以工作，但是有一个问题，如果我点击 .modal 它会做同样的事情，我不想，我需要告诉 jquery 隐藏仅当我点击 .overlay 时才会出现 div，如果我点击 .modal 则不会出现

我该怎么办？似乎附加到 .overlay 的事件是从 childrens 继承的。

多谢指教

在这里JSFIDDLE

Answer 1

请试试这个演示:http://jsfiddle.net/bcGZ3/3/

应用程序接口(interface):

• .stopPropagation - http://api.jquery.com/event.stopPropagation/
• .preventDefault http://api.jquery.com/event.preventDefault/

您想要的只是停止对子 div 的点击 popogation，Jquery api abpve 将帮助您实现这一目标。顺便说一句，您的 jsfiddle 样本是空的。

希望它符合需要，:)

示例代码

$('.overlay').on('click',function(){
        $(this).hide();
     alert("Parent div click function called.");
});


$(".modal").click(function(e) {
    // click on this link will cause ONLY child alert to fire
    e.stopPropagation();
    // stop default action of link
    e.preventDefault();
    alert("Well-behaved child link click ONLY.\n\nAnd, Enjoy.");
});