Как игнорировать событие click при нажатии на детей

Итак, у меня есть следующий сценарий:

<div id="block">
Sample text.
<a href="#">Anchor link</a>
</div>

<script type="text/javascript">
    $("#block").click(function() { alert('test'); });
</script>

Когда я нажимаю где-нибудь внутри div, я получаю предупреждение "test". Но я хочу предотвратить это, когда я нажимаю на ссылку "Якорь". Как это реализовать?

Спасибо

Ответы

Ответ 1

Вы можете отключить клики от ссылок с помощью дополнительного обработчика, например:

$("#block a").click(function(e) { e.stopPropagation(); });

Альтернатива, которую мы обсуждали в комментариях:

$("#block").delegate('a', 'click', function(e){ e.stopImmediatePropagation(); })
           .click(function() { alert('test'); });

Это предотвратит появление каких-либо дочерних ссылок (ну, на самом деле, но их обработчики не выполняются), но не создает обработчик для каждого элемента, это делается с помощью .stopImmediatePropagation().

Ответ 2

Это то, что вам нужно: http://api.jquery.com/event.target/.

Просто сравните, чтобы проверить, был ли элемент вызван нужным элементом или одним из его дочерних элементов.

Ответ 3

Вы можете проверить, какой node был нажат с target свойство объекта события:

$("#block").click(function(event) { 
    if(event.target.nodeName != 'A') {
        alert('test');
    }
});

Я предлагаю прочитать Свойства события из quirksmode.org.

Ответ 4

$("#block").click(function(event) {
    if($(event.target).attr('id') == $(this).attr('id'))
    {
        alert('test');
    }
});

Ответ 5

Вот демо (jsfiddle) с формами и двумя полями:

<div id="container">
    <form>
        <div class="field">
            <input id="demo" type="text" name="demo" />
        </div>
        <div class="field">
            <input id="demo2" type="text" name="demo2" />
        </div>
    </form>
</div>

Код выглядит следующим образом:

$(document).ready(function() {
    $('#container').click(function(evt) {
        if(this == evt.target) {
            console.log('clicked container',evt.target);
            $('#demo').focus();
        } else {
            console.log('clicked child -> ignoring');
        }
    });

    $('.field').click(function(evt) {
        if(this == evt.target) {
            console.log('clicked field div',evt.target);
            $(this).find('input').focus();
        } else {
            console.log('clicked child -> ignoring');
        }
    });
});

Вы можете щелкнуть контейнер, содержащий форму, чтобы установить фокус на первом поле ввода или за поле ввода, чтобы установить в него фокус.

Если вы нажмете в поле, то щелчок будет проигнорирован.

Этот код работает, поскольку jQuery присваивает DOM node this перед вызовом обработчиков событий, поэтому вы можете легко проверить, было ли текущее событие опубликовано DOM node, проверив

this == evt.target

CSS:

#container {
    width: 600px;
    height: 600px;
    background: blue;
}

.field {
    background: green;
}