例如，只需在所有HTML摘录周围包装一个标记

<a href="/categories/1">
  <img alt="test1" class="img-responsive" src="/assets/photo.jpg" />
  <div class="caption bg-orange">
    <h2>
      test1
    </h2>
  </div>
</a>

在我的示例中，我的字幕类具有悬停效果，指针事件为：无；你只会输

包装内容将保持悬停效果，您可以单击所有图片，包括div，问候！

不，你不能点击一个元素。您可以获取单击的坐标，并尝试找出单击元素下面是什么元素，但对于没有document.elementFromPoint的浏览器来说，这真的很乏味。然后，您仍然需要模拟默认的单击操作，这不一定是微不足道的，这取决于您在那里有什么元素。

由于你有一个完全透明的窗口区域，你可能会更好地将其作为外部的独立边界元素来实现，让中心区域没有障碍物，这样你就可以直接点击。

我认为您可以考虑更改标记。如果我没有错，您希望在文档上方放置一个不可见的层，并且您的不可见标记可能位于文档图像之前（这是正确的吗？）。

相反，我建议您将不可见图像放在文档图像之后，但将位置更改为绝对位置。

请注意，您需要一个父元素来具有position:relative，然后您就可以使用这个想法了。否则，绝对层将仅放置在左上角。

绝对位置元素相对于第一个父元素定位具有非静态位置的元素。如果没有找到这样的元素，则包含块为html

希望这有帮助。有关CSS定位的更多信息，请参阅此处。

我需要这样做，并决定走这条路：

$('.overlay').click(function(e){
    var left = $(window).scrollLeft();
    var top = $(window).scrollTop();

    //hide the overlay for now so the document can find the underlying elements
    $(this).css('display','none');
    //use the current scroll position to deduct from the click position
    $(document.elementFromPoint(e.pageX-left, e.pageY-top)).click();
    //show the overlay again
    $(this).css('display','block');
});

隐藏覆盖元素确定光标坐标获取这些坐标上的元素触发点击元素再次显示覆盖元素

$('#elementontop').click(e => {
    $('#elementontop').hide();
    $(document.elementFromPoint(e.clientX, e.clientY)).trigger("click");
    $('#elementontop').show();
});

我认为event.stopPropagation（）；这里也应提及。将此添加到按钮的单击功能。

防止事件在DOM树中冒泡，防止任何父处理程序收到事件通知。