Question

我的情况是：

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

现在我希望点击叠加层隐藏.overlay和.modal div，所以：

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

并且它有效，但是有一个问题，如果我点击.modal它会做同样的事情，我不想要，我需要告诉jquery隐藏div只有当我点击.overlay而不是点击.modal

我该怎么办？似乎附加到.overlay的事件继承自儿童。

感谢您的建议

此处JSFIDDLE

Answer 1

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

API：

.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();
    }
});

jQuery - 单击父级继承自子级

2 个答案: