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');
    }
}

ИЗМЕНИТЬ Следует отметить, что использование селектора $(*) не является хорошей идеей с точки зрения производительности. Вы действительно должны попытаться сузить область действия как-то.