JQuery: Ловушка всех событий щелчка, прежде чем они произойдут?
На моей странице у меня есть много различных элементов, которые реагируют на события кликов.
Есть моменты, когда мне нужно блокировать все клики на основе какого-либо глобального флага.
Есть ли способ сделать эту проверку в централизованном месте?
Сейчас в каждом событии я проверяю флаг, например:
var canClick = false; // Global flag
// Sample click event:
$("#someDiv").click(function(){
if(!canClick) return;
// Some stuff ...
});
Что бы я хотел сделать, это один элемент, который перехватывает все события щелчка перед любыми другими элементами.
Я попытался сделать это на документе, но эти события происходят только после других событий click.
Пример:
$("#someDiv").click(function(){ console.log("someDiv click"); });
$(document).click(function(){ console.log("Document click"); });
// When I click on the someDiv element it prints:
> someDiv click
> Document click
Я также попытался поместить полный экран div поверх всего и использовать это для ловушек событий, но проблема заключалась в том, что ни один из кликов не распространялся через этот полноэкранный div. Также я не хочу полагаться на создание дополнительных элементов для ловушки кликов, поскольку он немного взломан.
Могу ли я перезаписать функцию jQuery click, чтобы я мог поместить туда свою небольшую проверку?
Есть ли что-то очевидное, что я здесь отсутствует?
Спасибо за любую помощь.
Ответы
Ответ 1
Да, используйте .addEventListener() и установите третий вариант true. Это свяжет слушателя с фазой захвата и выполняет функцию до того, как что-то еще будет выполнено.
Вот пример, где это остановит выполнение всех обработчиков кликов:
document.addEventListener('click', function(e) {
e.stopPropagation();
}, true);
Смотрите здесь:
http://jsfiddle.net/wLwMh/1/
Ответ 2
Вы можете захватить все события кликов, а затем запустить настраиваемое событие, в котором ваши слушатели связаны после проверки.
$("#someDiv").bind('awesomeEvent', function() {
//do stuff here
}
$(*).click(function() {
if(canClick) {
$(this).trigger('awesomeEvent');
}
}
ИЗМЕНИТЬ
Следует отметить, что использование селектора $(*) не является хорошей идеей с точки зрения производительности. Вы действительно должны попытаться сузить область действия как-то.