Css 通过div单击以访问基础元素

我有一个

div

，它有

背景：透明的

，还有

边框

。在这个

div

下面，我有更多的元素

当前，当我在覆盖

div

之外单击时，我可以单击底层元素。但是，当直接单击覆盖

div

时，我无法单击底层元素

我希望能够单击此

div

，以便单击底层元素

---

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

---

元素占用的区域可由1找到。获取元素相对于页面左上角的位置，以及2。宽度和高度。像jQuery这样的库使这变得非常简单，尽管它可以在普通的js中完成。在

文档

对象上为

mousemove

添加事件处理程序将提供从页面顶部和左侧连续更新鼠标位置的功能。确定鼠标是否在任何给定对象上包括检查鼠标位置是否在元素的左、右、上、下边缘之间。

不，不能单击“穿过”元素。您可以获取单击的坐标，并尝试找出单击元素下面的元素，但对于没有

document.elementFromPoint

的浏览器来说，这确实是一件乏味的事情。然后，您仍然需要模拟默认的单击操作，这并不一定是微不足道的，这取决于下面有哪些元素

---

由于您有一个完全透明的窗口区域，您最好将其作为围绕外部的单独边界元素来实现，使中心区域没有障碍物，这样您就可以直接点击了。

是的，您可以这样做

使用

指针事件：none

以及IE11的CSS条件语句（在IE10或以下版本中不起作用），您可以获得此问题的跨浏览器兼容解决方案

使用

AlphaImageLoader

，您甚至可以将透明的

.PNG/.GIF

s放置在覆盖

div

中，并让单击流通过到下面的元素

CSS:

指针事件：无；
背景：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，这意味着它没有被单击。并将此数组取消移动到clickarray。你也可以用推

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

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

$（“正文”）。单击（函数（事件）{
event.preventDefault（）；//如果是a标记
var x=event.pageX；
var y=event.pageY；
var job=“”；
for（单击数组中的变量i）{
如果（x>=clickarray[i][0]&&x=clickarray[i][1]&&y0）{
//——把工作做点什么--
}
});

这个函数证明一个body click事件的坐标，或者它是否已经被单击，并返回name属性。我认为没有必要深入研究，但是你会发现它没有那么复杂。

---

希望是英语…

我之所以添加此答案，是因为我在这里没有看到完整的答案。我可以使用elementFromPoint来完成此操作。因此基本上：

• 将单击附加到要单击的div
• 藏起来
• 确定指针所在的元素
• 在该元素上触发单击

---

在我的例子中，叠加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需要手动事件转发

---

请参阅和。

您可以放置一个AP覆盖，如

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

只要把它放在你不想要的地方就行了

隐藏覆盖元素的对象

确定光标坐标

获取这些坐标上的元素

触发单击元素

再次显示覆盖元素

$（'#elementontop'）。单击（e=>{
$（'#elementontop'）.hide（）
#overlay {
  position: absolute;
  top: -79px;
  left: -60px;
  height: 80px;
  width: 380px;
  z-index: 2;
  background: url(fake.gif);
}

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

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

pointer-events: none; 

pointer-events: auto; 

    <style>
        .parent {
            pointer-events:none;        
        }
        .child {
            pointer-events:auto;
        }
    </style>
    
    <div class="parent">
      <a href="#">I'm unresponsive</a>
      <a href="#" class="child">I'm clickable again, wohoo !</a>
    </div>

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