通过div单击基础元素

Question

通过div单击基础元素我有一个div有background:transparent，连同border..在这下面div我有更多的元素。当前，当我单击覆盖的外部时，我可以单击基础元素div..但是，当直接单击覆盖时，我无法单击基础元素div.我想通过这个点击div这样我就可以点击底层元素了。

Answer 1

是的，你能，会，可以做这个。

使用pointer-events: none除了IE11的CSS条件语句(在IE10或更低版本中不起作用)之外，您还可以获得一个跨浏览器兼容的解决方案。

使用AlphaImageLoader，你甚至可以把透明的.PNG/.GIFS在覆盖层中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;

这里有一个基本示例页所有的密码。

Answer 2

也很高兴知道.。
您可以禁用父元素(可能是透明div)中的指针-事件，但仍然为其子元素启用指针事件。
如果您使用多个重叠的div层，您希望能够单击子元素，而父层根本不对任何鼠标事件作出反应，这是很有帮助的。为了这一切pointer-events: none它的可点击子程序获得指针事件，该指针事件由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>

Answer 3

我加这个答案是因为我没有在这里看到完整的答案。我能够使用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。