jQuery события click создают проблемы при попытке игнорировать некоторые дочерние элементы

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() при нажатии на любой дочерний тег ссылки, но привязать его к документу с помощью селектора внутри щелчка. Кажется, функция не работает.

У кого-то есть идея получше?

Answer 1

Вы можете проверить, была ли цель клика элементом <a>, а если нет, перейдите к .showHide().

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

Answer 2

Вам нужно изменить селектор, чтобы он действовал только для потомков #dropdown

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