通过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&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;pointer-events:none;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}.child&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;pointer-events:auto;}<div&nbsp;class="some-container"> &nbsp;&nbsp;&nbsp;<ul&nbsp;class="layer-0&nbsp;parent"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;class="click-me&nbsp;child"></li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;class="click-me&nbsp;child"></li> &nbsp;&nbsp;&nbsp;</ul> &nbsp;&nbsp;&nbsp;<ul&nbsp;class="layer-1&nbsp;parent"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;class="click-me-also&nbsp;child"></li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;class="click-me-also&nbsp;child"></li> &nbsp;&nbsp;&nbsp;</ul></div>

Answer 3

我加这个答案是因为我没有在这里看到完整的答案。我能够使用ElementFromPoint来完成这个任务。所以基本上：将单击附加到要单击的div上。藏起来确定指针在哪个元素上。启动对该元素的单击。var&nbsp;range-selector=&nbsp;$("") &nbsp;&nbsp;&nbsp;&nbsp;.css("position",&nbsp;"absolute").addClass("range-selector") &nbsp;&nbsp;&nbsp;&nbsp;.appendTo("") &nbsp;&nbsp;&nbsp;&nbsp;.click(function(e)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_range-selector.hide(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(document.elementFromPoint(e.clientX,e.clientY)).trigger("click"); &nbsp;&nbsp;&nbsp;&nbsp;});在我的例子中，覆盖div是绝对定位的-我不确定这是否有区别。这至少适用于IE8/9、Safari Chrome和Firefox。