Как запретить другим обработчикам событий, от первого обработчика, в jQuery - PullRequest
30 голосов
/ 14 ноября 2011

Если вы прикрепите два или более обработчика событий к элементу HTML, они будут выполняться один за другим. Однако, если вы хотите остановить последующие обработчики событий, основываясь на условии, проверенном в первом обработчике, что вам следует делать?

Например:

<div id='target'>
</div>

<p id='result'>
</p>

Я бы хотел отменить второй обработчик, если отменен первый обработчик.

$(function() {
    var target = $('#target'),
        result = $('#result');
    target.click(function(e) {
        result.append('first handler<br />');
        // Here I want to cancel all subsequent event handlers
    });
    target.click(function(e) {
        result.append('second handler<br />');
    });
});

Вы можете увидеть скрипку здесь .

PS: я знаю, что e.preventDefault() предотвращает действие по умолчанию элемента HTML (например, предотвращает отправку запроса HTTP GET из-за щелчка по ссылке), и e.preventPropagation() вызывает распространение события на его родительские элементы в дереве DOM. Я также знаю, что можно использовать среднюю переменную, установить ее в true в первом обработчике и проверить ее в последующих обработчиках. Но я хочу посмотреть, есть ли более аккуратное, изощренное решение этой проблемы или нет.

Ответы [ 2 ]

45 голосов
/ 14 ноября 2011

См. event.stopImmediatePropagation() - http://api.jquery.com/event.stopImmediatePropagation/

В соответствии с документами jQuery API этот метод:

Сохраняет выполнение остальных обработчиков и предотвращает событиевсплывающее дерево DOM.

1 голос
/ 14 ноября 2011

Решение зависит от браузера.См. dojo.stopEvent:

dojo.stopEvent = function(/*Event*/ evt){
    // summary:
    //        prevents propagation and clobbers the default action of the
    //        passed event
    // evt: Event
    //        The event object. If omitted, window.event is used on IE.
    if(has("dom-addeventlistener") || (evt && evt.preventDefault)){
        evt.preventDefault();
        evt.stopPropagation();
    }else{
        evt = evt || window.event;
        evt.cancelBubble = true;
        on._preventDefault.call(evt);
    }
};

Обновленная скрипта: http://jsfiddle.net/pFp7P/1/

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