Javascript jQuery-单击父项继承自子项

我的情况是：

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

这是可行的，但有一个问题，如果我点击

.modal

它也会这样做，我不想，我需要告诉jquery只有在点击.overlay时才隐藏div，而不是点击.modal

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

谢谢你的建议

这里

试试这个：

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

尝试此演示plz：

API:

• .stopPropagation

  -

• .preventDefault

您只需要停止对子div的点击，jqueryapi abpve将帮助您实现这一点。顺便说一句，您的JSFIDLE示例是空的

希望它能满足需要，

：）

示例代码

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

---

使用来自的div id和触发器id@SJnawali真正地你能解释一下为什么吗？

$（'.overlay'）

与他的HTML示例中的

$（'.overlay:not（.modal））

不一样吗？谢谢，第一个示例不起作用，第二个返回evt未定义错误：（这很奇怪……这应该是实际的点击事件。嘿，你的解决方案很好，但我需要的是Tats_Innint在他的回答中所说的内容，这一点是固定的，我尝试了你的解决方案，它们与我自己尝试的一样，但没有结果：（.真的非常感谢；）我会在3分钟内接受，这个问题已经解决了，真的谢谢你，老兄！@okok别担心，布鲁夫

：）

很高兴能帮上忙！

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