javascript - 一个div的Jquery点击功能，但不是div内的链接？

Question

我有一个点击功能，当用户点击 div 中的任何地方时，它会成功运行。但是，div 中有一个链接。如果用户单击该链接，我不想运行该功能，以便用户在单击时转到链接 url。

html

<div id="container">
<a href="http://www.example.org"></a>
</div>

查询

$(document.body).on('click', '[id="container"]' ,function(){
// do whatever
});

我应该使用哪种方法来实现？

Answer 1

您可以通过如下方式查看点击的目标:

$(document.body).on('click', '#container' ,function(e){
    if (e.target.id !== 'container') return; // not the element we want
    // do whatever
});

或者，如果 div 的任何其他子元素应该被允许，除非它是 a 元素，那么:

$(document.body).on('click', '#container' ,function(e){
    if (e.target.tagName === 'A') return; // not the element we want
    // do whatever
});