通过 div 单击底层元素

我有一个具有background:transparentborderdiv 。在这个div ,我还有更多元素。

当前,当我在 overlay div之外单击时,我可以单击基础元素。但是,当直接单击 overlay div时,我无法单击基础元素。

我希望能够单击此div以便可以单击基础元素。

我的问题

答案

是的,你可以做到这一点。

使用pointer-events: none与 IE11 一起使用的 CSS 条件语句(在 IE10 或更低版本中不起作用),您可以获得针对此问题的跨浏览器兼容解决方案。

使用AlphaImageLoader ,您甚至可以将透明.PNG/.GIF放置在叠加div并使点击流到下面的元素。

CSS:

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

IE11 有条件:

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

这是带有所有代码的基本示例页面

也很高兴知道...
您可以在父元素(可能是透明的 div)中禁用指针事件,但仍对其子元素启用指针事件。
如果您使用多个重叠的 div 层(希望在其中单击子元素,而使父层完全不对任何鼠标事件做出反应),则这将很有帮助。

为此,所有育儿 div 都获得pointer-events: none ,其可点击的子代获得由pointer-events: auto事件重新启用的pointer-events: auto

.parent {
    pointer-events:none;        
}
.child {
    pointer-events:auto;
}

<div class="some-container">
   <ul class="layer-0 parent">
     <li class="click-me child"></li>
     <li class="click-me child"></li>
   </ul>

   <ul class="layer-1 parent">
     <li class="click-me-also child"></li>
     <li class="click-me-also child"></li>
   </ul>
</div>

允许用户单击div到基础元素取决于浏览器。所有现代浏览器(包括 Firefox,Chrome,Safari 和 Opera)都可以理解pointer-events:none

对于 IE,这取决于背景。如果背景是透明的,则无需执行任何操作即可实现点击。另一方面,对于诸如background:white; opacity:0; filter:Alpha(opacity=0);类的东西background:white; opacity:0; filter:Alpha(opacity=0); ,IE 需要手动事件转发。

请参阅JSFiddle 测试CanIUse 指针事件

我要添加此答案,因为我在这里没有看到完整的答案。我能够使用 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 浏览器和 Firefox。

  1. 隐藏叠加元素
  2. 确定光标坐标
  3. 在这些坐标上获取元素
  4. 触发元素点击
  5. 再次显示叠加元素
$('#elementontop).click(function (e) {
        $('#elementontop).hide();
        $(document.elementFromPoint(e.clientX, e.clientY)).trigger("click");
        $('#elementontop').show();
    });

我需要这样做,并决定采用以下路线:

$('.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 中,因此它下面的某些链接不再能够单击。在这种情况下,我无法使用 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 的左 / 上和右 / 下角的坐标 - 另外,如果有人单击该坐标该怎么办,并且我喜欢将其设置为 1 表示未单击喷气机,该方法的 name 属性。并将此数组移至 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 --
            }
          });

此函数证明正文单击事件的坐标或它是否已被单击,然后返回 name 属性。我认为没有必要更深入,但是您看到的并不那么复杂。希望在...

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

元素所占的面积可以通过以下方式找到:1. 获取元素相对于页面左上角的位置,以及 2. 宽度和高度。尽管可以用普通的 js 完成,但类似 jQuery 的库使这一过程变得非常简单。在document对象上添加mousemove事件处理程序将提供页面顶部和左侧的鼠标位置的连续更新。确定鼠标是否在任何给定对象上的步骤包括检查鼠标位置是否在元素的左,右,上和下边缘之间。

不,您不能单击 “通过” 元素。您可以获取单击的坐标,并尝试计算出 clicked 元素下方的元素,但这对于没有document.elementFromPoint浏览器来说确实很繁琐。然后,您仍然必须模拟默认的单击操作,这不一定是琐碎的事,具体取决于您在该菜单下拥有的元素。

由于您拥有一个完全透明的窗口区域,因此最好将其实现为围绕外部的单独边框元素,从而使中心区域没有障碍,因此您实际上可以直接单击。

尝试(根据情况)尝试的另一种想法是:

  1. 将您想要的内容放入 div;
  2. 将非点击重叠式广告放在整个页面上,并将 z-index 设置为更高,
  3. 再次制作原始 div 的裁剪副本
  4. overlay 和 abs 将副本 div 与您希望以更高的 z 索引单击的原始内容位于同一位置?

有什么想法吗?