css - 点击元素下面的DIV

  显示原文与译文双语对照的内容

我有一个 div,它有 background:transparent,还有 border 。 在这个 div 下,我有更多的元素。

当前,当单击覆盖 div 之外的内容时,我可以单击底层元素。 但是,当直接单击覆盖 div 时,无法单击底层元素。

我希望能够通过这里 div 单击,以便单击底层元素。

My Problem

时间:

是的,你 可以执行这里操作。

使用 pointer-events: none 和 IE11 ( 在IE10或者下面不工作)的CSS条件语句,你可以为这个问题获得一个 跨浏览器 兼容的解决方案。

使用 AlphaImageLoader,你甚至可以把透明 .PNG/.GIF s 中的覆盖 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;

下面是一个带有所有代码的基本示例页面

因为我没有在这里看到它,所以我添加了这个答案。 我可以用elementFromPoint做这个。 所以基本上:

通过-hide它 -determine -attach一次点击到这个div要被点击的元素的一个指针是在-fire元素点击那里。


var range-selector= $("<div></div>")
. css("position","absolute").addClass("range-selector")
. appendTo("<element to be on top of>")
. click(function(e) {
 _range-selector.hide();
 $(document.elementFromPoint(e.clientX,e.clientY)).trigger("click");
 });;

在堆焊div是绝对定位的,如果在我的例子中,会产生一些差异我不很确定 在 ie8/9,Safari Chrome 和 Firefox 上运行。

也很高兴知道。。
于其子elements,可以禁用相关 pointer-events ( 可能是透明的div ) 但有它仍然在父作用域中的元素来显示
任何在all,这种方法有效,如果用户正在处理多个重叠的div层,鼠标事件上,你希望能够点击子元素,虽然具有父图层不可 react. 以使它的全部育儿div获得 pointer-events: nonepointer-events: all,并且它的可以点击的子节点获取pointer-events启用


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

<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中,所以它下面的一些链接不能再点击。 在这种情况下,我不能使用 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 --
 }
 });

这里函数用于验证主体单击事件的坐标或者它是否已经被单击并返回名称属性。 我认为没有必要深入,但你看这并不是那么复杂。 希望在英语中。。

日子不是这么过的 周围的工作是手动检查每个元素占用的区域的鼠标点击坐标。

元素占用的区域可以在 1找到。 获取相对于页面左上角的元素的位置,以及 2. 宽度和高度。 像jQuery这样的库使得这个非常简单,尽管它可以用普通的js完成。 上方或者左方处 page, mousemove的添加事件处理程序的document 对象将提供持续的更新上鼠标姿势, 决定鼠标是否位于给定的对象上包括检查鼠标位置是否在元素的左,右,上和下边缘。

否,不能单击'通过'元素。 你可以获得点击的co-ordinates,并尝试找出在点击元素下面的元素,但这对于没有 document.elementFromPoint的浏览器来说实在是乏味。 然后你仍然需要模拟点击的默认动作,这并不一定无关紧要,具体取决于你在下面的元素。

既然你已经找到了一枚fully-transparent窗口区域,你可能不会有什么更好的阻碍等单独的边框元素,保留该中心区域以外周围的自由实现它,这样才能够真正地只需点击直接晋级

我知道这是个老问题,但是。

我需要这样做并决定采取这个路线:


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

...