javascript - jQuery 单击事件在尝试忽略某些子项时会出现问题

Question

我的点击事件有问题:

$( document ).on( "click", "#dropdown", function () {
    showHide();
} ).find( "a" ).click( function ( e ) {
    e.stopPropagation();
} );


<div id="dropdown">
    <a href="https://google.de"></a> <- This should not trigger the click
</div>

将其添加到我的 JS 文件后，我无法再单击任何 <a>我的页面上的元素。发生这种情况是因为我的 e.stopPropagation() .

我原本想做的是阻止调用我的 showHide()当我单击任何子链接标记时，函数会起作用，但使用单击函数内的选择器将其绑定(bind)到文档上似乎不起作用。

有人有更好的主意吗？

Answer 1

您可以检查点击的目标是否为 <a>元素，如果不是，则继续 .showHide() .

$( document ).on( "click", "#dropdown", function (event) {
    if(!(event.target.tagName.toLowerCase() === 'a')){
         showHide();
    }
} );