例如，只需在所有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，问候！

我加上这个答案是因为我没有看到它的全部内容。我能够使用elementFromPoint完成这一操作。所以基本上：

将单击附加到要单击的div把它藏起来确定指针所在的元素单击元素。

var range-selector= $("")
    .css("position", "absolute").addClass("range-selector")
    .appendTo("")
    .click(function(e) {
        _range-selector.hide();

        $(document.elementFromPoint(e.clientX,e.clientY)).trigger("click");
    });

在我的例子中，重叠的div是绝对定位的——我不确定这是否会产生差异。这至少适用于IE8/9、Safari Chrome和Firefox。

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

$('.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');
});

您可以放置AP覆盖，如。。。

#overlay {
  position: absolute;
  top: -79px;
  left: -60px;
  height: 80px;
  width: 380px;
  z-index: 2;
  background: url(fake.gif);
}

<div id="overlay"></div>

把它放在你不想要的地方。总之是有效的。

我不能总是使用指针事件：在我的场景中没有，因为我希望覆盖层和底层元素都可以单击/选择。

DOM结构如下所示：

<div id="outerElement">
   <div id="canvas-wrapper">
      <canvas id="overlay"></canvas>
   </div>
   <!-- Omitted: element(s) behind canvas that should still be selectable -->
</div>

（outerElement、canvas wrapper和canvas元素具有相同的大小。）

为了使画布后面的元素正常工作（例如，可选择、可编辑），我使用了以下代码：

canvasWrapper.style.pointerEvents = 'none';

outerElement.addEventListener('mousedown', event => {
    const clickedOnElementInCanvas = yourCheck // TODO: check if the event *would* click a canvas element.
    if (!clickedOnElementInCanvas) {

        // if necessary, add logic to deselect your canvas elements ...

        wrapper.style.pointerEvents = 'none';
        return true;
    }

    // Check if we emitted the event ourselves (avoid endless loop)
    if (event.isTrusted) {
        // Manually forward element to the canvas
        const mouseEvent = new MouseEvent(event.type, event);
        canvas.dispatchEvent(mouseEvent);
        mouseEvent.stopPropagation();
    }
    return true;
});

一些画布对象还带有输入字段，因此我也必须允许键盘事件。为此，我必须根据画布输入字段当前是否聚焦来更新pointerEvents属性：

onCanvasModified(canvas, () => {
    const inputFieldInCanvasActive = // TODO: Check if an input field of the canvas is active.
    wrapper.style.pointerEvents = inputFieldInCanvasActive  ? 'auto' : 'none';
});

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

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