点击一个DIV到底层元素
我有一个具有background:transparent的div background:transparent ， border 。 在这个div下面，我有更多的元素。
目前，我可以点击覆盖div以外的基础元素。 但是，直接点击叠加div时，我无法点击底层元素。
我希望能够点击这个div以便我可以点击底层的元素。
是的，你可以做到这一点。
使用pointer-events: none IE11的CSS条件语句（在IE10或以下版本中不起作用），你可以得到一个跨浏览器兼容的解决scheme，这个问题。
使用AlphaImageLoader ，您甚至可以将透明的.PNG/.GIF放入覆盖区域，并让点击stream到下面的元素。
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图层，您希望能够单击子元素，同时让父图层对所有鼠标事件根本不作出反应，这会很有帮助。 对于这个所有的父母divs得到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>
通过点击浏览器中的底层元素工作不同。 Opera需要手动事件转发，Firefox和Chrome了解CSS pointer-events:none; IE不需要任何透明背景; 例如background:white; opacity:0; filter:Alpha(opacity=0); background:white; opacity:0; filter:Alpha(opacity=0); IE需要像Opera一样转发。
请参阅http://jsfiddle.net/vovcat/wf25Q/1/和http://caniuse.com/pointer-events的转发testing。; 指针事件CSS属性已经从CSS3-UI转移到CSS4-UI。
我正在添加这个答案，因为我没有在这里看到它的全部。 我能够做到这一点使用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是绝对定位 – 我不知道这是否有所作为。 这至less适用于IE8 / 9，Safari浏览器和Firefox。
- 隐藏覆盖元素
- 确定光标坐标
- 获取这些坐标上的元素
- 触发点击元素
- 再次显示覆盖元素
$（'＃elementontop）.click（function（e）{
$（'＃elementontop）.hide（）;
$（document.elementFromPoint（e.clientX，e.clientY））。trigger（“click”）;
$（ '＃elementontop'）显示（）。
}）;
我目前使用帆布气球。 但是因为带有指针的气球被封装在一个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的左/右和右/下angular的坐标 – 另外还有如果有人点击坐标时要做什么的名称属性，我喜欢设置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 -- } });
此函数validation身体单击事件的坐标或者是否已经单击并返回名称属性。 我认为没有必要去更深入，但你看它并不复杂。 希望早日康复
它不这样工作。 解决的办法是手动检查鼠标点击坐标的每个元素占用的区域。
一个元素所占据的区域可以通过以下find：1.获得元素相对于页面左上angular的位置，以及2.宽度和高度。 像jQuery这样的库使得这非常简单，虽然它可以在普通的js中完成。 为document对象上的mousemove添加事件处理程序将从页面的顶部和左侧持续更新鼠标位置。 确定鼠标是否在任何给定的对象上包括检查鼠标位置是否在元素的左边，右边，顶部和底部边缘之间。
我知道这是一个老问题，但到底是什么。
我需要这样做，并决定采取这样的路线：
$('.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'); });
不，你不能点击“通过”一个元素。 您可以获得点击的坐标，并尝试找出单击元素下方的元素，但对于没有document.elementFromPoint浏览器来说，这是非常繁琐的。 然后，你仍然需要模拟点击的默认动作，这不一定是微不足道的，这取决于你在那里有什么元素。
既然你已经有了一个完全透明的窗口区域，那么你可能会更好地将它作为外部的独立边界元素来实现，这样中心区域就不会受到阻碍，所以你可以直接点击。
另一个尝试（情况）的想法是：
- 把你想要的内容放在div中;
- 将整个页面上的非点击叠加放在z-index上方，
- 做另一个原始div的裁剪副本
- 覆盖和绝对位置复制div在原来的内容，你想要点击一个更高的Z指数相同的地方？
有什么想法吗？
我认为你可以考虑改变你的标记。 如果我没有错，你想在文档的上面放一个隐形的图层，而你的隐形标记可能在你的文档图像之前（这是否正确？）。
相反，我build议你在文档图像之后放置不可见的权利，但将位置改为绝对的。
注意你需要一个父元素来定位：relative，然后你就可以使用这个想法。 否则，你的绝对层将被放置在左上angular。
绝对位置元素相对于具有非静态位置的第一个父元素进行定位。 如果找不到这样的元素，则包含的块是html
希望这可以帮助。 有关CSS定位的更多信息，请参阅此处 。
例如，只需在所有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>
在我的例子中，我的标题类有hover效果，与指针事件：无; 你只会失去
包装的内容将保持你的hover效果，你可以点击所有图片，包括div， 问候！
你可以放置一个AP覆盖像…
#overlay { position: absolute; top: -79px; left: -60px; height: 80px; width: 380px; z-index: 2; background: url(fake.gif); }
<div id="overlay"></div>
只要把它放在你不想要的东西即cliked。 共同工作。
