JQuery on('contextmenu')用于body,但是特殊的一个类

Question

我有一个大div(整页),里面有一个较小的div:

<div class="all">
    <div class="tiny"></div>
</div>

div.all对我来说就像一块板子,上面div.tiny有一个小矩形.我想在任何时候(或什么都没有)div.all获得RMB 时显示我的特殊上下文菜单.但是当我打开RMB时div.tiny,我不想执行那个"默认"程序,而是执行一些(甚至更特殊的)代码.我尝试过:

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 */
});

当我运行它,RMB div.all或其中的元素时,我得到了"特殊的东西".但是,当我点击人民币时,div.tiny我会得到"特殊的东西" (我不想要的)和"更特别的东西"(它太特别了,我怎么也不想要它!).

有解决方案吗

为了让生活困难,我不能改变(第一顺序jQuery()为div.all对,比我的功能div.tiny) -在我真正的项目的事情比较复杂,我必须保持这种为了某些原因(还是它的外观相当合理的-从全球事件精确的).

Answer 1

这很简单,你只需要阻止事件比你的.tiny处理程序传播得更远.

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

假设您可能有很多.tiny,或者它们是动态生成的,您可以将此事件委托给.all:

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

另一种选择是检查e.target.

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

那你就得到了另一个正常的处理程序 .tiny