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

Question

我的情况是：

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

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

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

它可以工作，但是有一个问题，如果我点击.modal它会做同样的事情，而且我不想要，我需要告诉 jquery 只有在我点击 .overlay 而不是点击 .overlay 时才隐藏 div。模态的

我能怎么做？似乎附加到 .overlay 的事件是从孩子那里继承的。

感谢您的建议

这里是 JSFIDDLE

Answer 1

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

接口：

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

您想要的只是停止对子 div 的点击弹出，而 Jquery apis 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.");
});

Answer 2

尝试这个：

$('.overlay').on('click',function(evt){
    if(!$(evt.currentTarget).is('.modal')){
        $('.overlay, .modal').hide();
    }
});