它不是那样工作的。解决方法是根据每个元素所占据的区域手动检查鼠标点击的坐标。

元素所占的面积可由1找到。获取元素相对于页面左上角的位置，以及2。宽度和高度。像jQuery这样的库使得这非常简单，尽管它可以用普通的js实现。在文档对象上添加mousemove的事件处理程序将从页面的顶部和左侧连续更新鼠标位置。确定鼠标是否在任何给定对象上包括检查鼠标位置是否在元素的左、右、上和下边缘之间。

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

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

是的，你可以这样做。

使用指针事件：none以及IE11的CSS条件语句（在IE10或更低版本中不起作用），您可以获得一个跨浏览器兼容的解决方案。

使用AlphaImageLoader，您甚至可以在覆盖div中放置透明的.PNG/.GIF，并让单击流到下面的元素。

CSS:

pointer-events: none;
background: url('your_transparent.png');

IE11条件：

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;

这里是一个包含所有代码的基本示例页面。

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

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

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

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

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

我目前使用的是画布演讲气球。但是，由于带有指针的气球被包装在一个div中，因此它下面的一些链接不再可单击。在这种情况下，我不能使用extjs。参见我的演讲气球教程需要HTML5的基本示例

因此，我决定从阵列中的气球内部收集所有链接坐标。

var clickarray=[];
function getcoo(thatdiv){
         thatdiv.find(".link").each(function(){
                 var offset=$(this).offset();           
                 clickarray.unshift([(offset.left),
                                     (offset.top),
                                     (offset.left+$(this).width()),
                                     (offset.top+$(this).height()),
                                     ($(this).attr('name')),
                                     1]);
                                     });
         }

我在每个（新的）气球上调用这个函数。它获取link.class的左/上角和右/下角的坐标-此外，如果有人在该坐标中单击，该怎么做的name属性，我喜欢设置1，这意味着它没有被单击jet。然后将此阵列取消移动到单击阵列。你也可以使用push。

要使用该阵列，请执行以下操作：

$("body").click(function(event){
          event.preventDefault();//if it is a a-tag
          var x=event.pageX;
          var y=event.pageY;
          var job="";
          for(var i in clickarray){
              if(x>=clickarray[i][0] && x<=clickarray[i][2] && y>=clickarray[i][1] && y<=clickarray[i][3] && clickarray[i][5]==1){
                 job=clickarray[i][4];
                 clickarray[i][5]=0;//set to allready clicked
                 break;
                }
             }
          if(job.length>0){   
             // --do some thing with the job --
            }
          });

此函数用于证明主体单击事件的坐标或是否已单击该事件，并返回name属性。我认为没有必要再深入一点，但你知道这并没有那么复杂。希望在我身边。。。

我加上这个答案是因为我没有看到它的全部内容。我能够使用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');
});

允许用户通过div单击底层元素取决于浏览器。所有现代浏览器，包括Firefox、Chrome、Safari和Opera，都能理解指针事件：没有。

对于IE，这取决于背景。如果背景是透明的，则无需执行任何操作即可进行点击。另一方面，对于像背景这样的东西：白色；不透明度：0；过滤器：Alpha（不透明度=0）；，IE需要手动事件转发。

请参阅JSFiddle测试和CanIUse指针事件。

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

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

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

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

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

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

另一个尝试（情境）的想法是：

将所需内容放入div中；将非点击覆盖放在整个页面上，z索引更高，制作原始div的另一个裁剪副本overlay和abs将复制div放置在与原始内容相同的位置，您希望使用更高的z索引进行单击？

有什么想法吗？

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

是的，可以强制重叠层通过（忽略）单击事件。此外，你可以让特定的孩子被排除在这种行为之外。。。

可以使用指针事件执行此操作

指针事件影响对点击、轻击、滚动和悬停事件的反应。

在应该忽略/通过您设置的所述事件的层中

pointer-events: none; 

需要再次响应鼠标/轻敲事件的无响应层的子级需要：

pointer-events: auto; 

如果您使用多个重叠的div层（可能有些父层是透明的），那么第二部分非常有用，您需要能够单击子元素，并且仅单击该子元素。

示例用法：

.父级{指针事件：无；}.儿童{指针事件：自动；}<div class=“parent”><a href=“#”>我没有反应</a><a href=“#”class=“child”>我又可以点击了，哇</a></div>

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

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

更简单的方法是使用数据URI内联透明背景图像，如下所示：

.click-through {
    pointer-events: none;
    background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}

这不是问题的精确答案，但可能有助于找到解决方法。

我有一个图像，我在页面加载时隐藏并在等待AJAX调用时显示，然后再次隐藏。。。

我发现在加载页面时显示我的图像，然后使其消失，并能够在隐藏之前单击图像所在的位置的唯一方法是将图像放入DIV中，使DIV的大小为10x10像素或足够小，以防止其引发问题，然后隐藏包含的DIV。这允许图像在可见时溢出DIV，当DIV隐藏时，只有divs区域受到无法单击下方对象的影响，而不是DIV包含和显示的图像的整个大小。

我尝试了所有隐藏图像的方法，包括CSS display=none/block，opacity=0，hidden=true隐藏图像。所有这些都导致我的图像被隐藏，但显示的区域就像下面的东西上有一个盖子，所以点击等不会对底层对象起作用。一旦图像位于一个小DIV内，我隐藏了这个小DIV，图像所占的整个区域都是清晰的，只有我隐藏的DIV下的小区域受到影响，但当我将其缩小到足够小（10x10像素）时，问题得到了解决（某种程度上）。

我发现这是一个肮脏的解决方法，它应该是一个简单的问题，但我无法找到任何方法在没有容器的情况下以其原生格式隐藏对象。我的目标是等。如果有人有更好的方法，请告诉我。

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

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