Question

我有这个事件：

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

我有这个问题：

当我右键单击以显示上下文菜单然后单击.element时（当上下文菜单可见时），Chrome中的e.target为body而不是.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中重新创建问题时，这种情况不会发生，也许这就是点击时textarea的焦点/模糊。

当上下文菜单可见时，e.target是单击时的正文

1 个答案: