javascript - e.target 是上下文菜单可见时点击的主体

Question

我有这个事件:

$(document).on('click', function(e) {
   var $target = $(e.target);
   if ($target.is('.element')) {
      console.log('element');
   }
});

我有这个问题:

当我右键单击以显示上下文菜单，然后单击 .element(当上下文菜单可见时)时，e.target 是 body 不是 Chrome 中的 .element。

如何检测我是否点击了 .element？

Answer 1

我已经通过添加这段代码解决了这个问题:

function inside(element, x, y) {
    var offset = element.offset();
    var width = element.outerWidth();
    var height = element.outerHeight();
    return (x > offset.left && y > offset.top &&
            x < (offset.left + width) && y < (offset.top + height));
}

$(document).on('click', function(e) {
   e = e.originalEvent;
   var inside_elements = $('.element').get().filter(function(element) {
       return inside(element, e.pageX, e.pageY);
   });
   if (inside_elements.length) {
      console.log('element');
   }
});

编辑:并找到了另一个解决方案:

$(document).on('click', function(e) {
   e = e.originalEvent;
   var node = document.elementFromPoint(e.pageX, e.pageY);
   var $target = $(node);
   if ($target.is('.element')) {
      console.log('element');
   }
});

EDIT2 很奇怪，当我尝试在 codepen 中重现问题时，这种情况并没有发生，也许是点击时文本区域的焦点/模糊。