Как предотвратить другие обработчики событий, начиная с первого обработчика, в jQuery
Если вы присоедините два или более обработчика событий к элементу 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 в первом обработчике и проверить ее в последующих обработчиках. Но я хочу посмотреть, есть ли более четкое, сложное решение этой проблемы или нет.
Ответы
Ответ 1
См. event.stopImmediatePropagation()
- http://api.jquery.com/event.stopImmediatePropagation/
В соответствии с документами jQuery API этот метод:
Сохраняет выполнение остальных обработчиков и предотвращает появление пузырьков в дереве DOM.
Ответ 2
Решение зависит от браузера. См. 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/