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

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模糊的问题。