JQuery on (‘contextmenu’) para body, pero una clase especial

Tengo una gran div (página entera) y dentro tengo una más pequeña:

div.all es como un tablero para mí, div.tiny es un pequeño rectángulo en él. Quiero mostrar mi menú contextual especial cada vez que algo (o nada) en div.all obtendrá RMB. Pero cuando hago RMB en div.tiny , no quiero ejecutar ese procedimiento “predeterminado”, sino un código (incluso más especial). Lo he intentado con:

 jQuery('body').on("contextmenu", ".all", function(){ /* special stuff */}); jQuery('body').off("contextmenu", ".all .tiny"); /* <- tried to turn off my...*/ /*...special stuff for .tiny that way*/ jQuery('body').on("contextmenu", ".tiny", function(){ /* even more special stuff */ }); 

Cuando lo ejecuto, RMB en div.all o elementos dentro de él, obtengo “cosas especiales” hechas. Pero cuando hago clic en RMB en div.tiny obtengo tanto “material especial” (que no quiero) como “material aún más especial” (¡es tan especial, cómo no puedo quererlo!).

¿Alguna solución?

Para hacer la vida más difícil, no puedo cambiar el orden (el primer jQuery() para div.all , THAN mis funciones para div.tiny ). En mi proyecto real, las cosas son más complicadas y tengo que mantener ese orden por algunas razones (aún Es bastante razonable, desde eventos globales hasta eventos precisos.

Es bastante simple, solo necesita detener la propagación del evento más allá de su controlador .tiny .

 $('.tiny').on('contextmenu', function(e){ e.stopPropagation(); // Your code. }); 

Suponiendo que tenga muchos .tiny ‘s, o que se generen dinámicamente, podría delegar este evento a .all :

 $('.all').on('contextmenu', '.tiny', function(e){ e.stopPropagation(); // Your code. }); 

Otra opción es marcar el e.target .

 $('body').on('contextmenu', '.all', function(e){ if(!$(e.target).hasClass('.tiny')){ // The target element is not a .tiny div } }); 

Entonces tendrías tu otro manejador normal para .tiny