jQuery: ¿Atrapa todos los eventos de clic antes de que sucedan?

Question

En mi página tengo muchos elementos diversos que responden a los eventos de clic. Hay momentos en los que necesito bloquear todos los clics en función de alguna bandera global. ¿Hay alguna forma de que pueda hacer esta verificación en una ubicación centralizada?

Ahora mismo en cada caso puedo comprobar por la bandera, por ejemplo:

var canClick = false; // Global flag 

// Sample click event: 
$("#someDiv").click(function(){ 
    if(!canClick) return; 

    // Some stuff ... 
}); 

Lo que me gustaría hacer es tener un elemento que atrapa todos los eventos de clic antes de cualquier otro elemento.

Intenté hacerlo en documento pero estos eventos solo ocurren después de los otros eventos de clic.

Ejemplo:

$("#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 

También intenté poner un div pantalla completa por encima de todo y usando esto para eventos de trampa, pero el problema no era que ninguno de los clics se está propagando a través de este div pantalla completa. Además, no quiero confiar en la creación de elementos adicionales para atrapar clics, ya que se siente un poco hacky.

¿Podría quizás sobreescribir la función de clic de jQuery para poder poner mi pequeño cheque allí?

¿Hay algo obvio que me falta aquí?

Gracias por cualquier ayuda.

Answer 1

Sí, use .addEventListener() y establezca la tercera opción en true. Esto vinculará al oyente con la fase de captura y ejecutará la función antes de que se ejecute cualquier otra cosa.

He aquí un ejemplo en el que esto detendrá todos los manipuladores de clic de ejecución:

document.addEventListener('click', function(e) { 
    e.stopPropagation(); 
}, true); 

verlo en acción aquí:

http://jsfiddle.net/wLwMh/1/

Answer 2

Se podría capturar todos los eventos de clic a continuación, desencadenar un evento personalizado en el que ha sus oyentes con destino después de su salida

$("#someDiv").bind('awesomeEvent', function() { 
    //do stuff here 
} 

$(*).click(function() { 
    if(canClick) { 
     $(this).trigger('awesomeEvent'); 
    } 
} 

EDITAR Debo mencionar que el uso de $ (*) selector no es una buena idea desde el punto de vista del rendimiento Realmente deberías tratar de reducir el alcance de alguna manera.