JQuery on ('contextmenu' ) for body, but special one class

Question

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

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

div.all对我来说就像一 block 木板，div.tiny上面是一个小矩形。我想在 div.all 中随时显示我的特殊上下文菜单(或什么都不显示)会得到人民币。但是当我人民币上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 */
});

当我运行它时，人民币在 div.all或其中的元素，我完成了“特殊的事情”。但是当我在 div.tiny 上点击人民币时我得到了“特别的东西”(我不想要的)和“更特别的东西”(它太特别了，我多么不想要它!)。

有什么解决办法吗？

为了让生活更艰难，我无法更改顺序(第一个 jQuery() 为 div.all，而不是我的函数为 div.tiny)- 在我的真实项目中，事情更复杂，我必须为某些人保留该顺序原因(仍然看起来很合理 - 从全局事件到精确事件)。

Answer 1

这很简单，您只需要阻止事件传播到您的 .tiny 处理程序之外。

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

假设您可能有很多 .tiny，或者它们是动态生成的，您可以将此事件委托(delegate)给 .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 的其他正常处理程序了