关于css：点击div到底层元素

Click through div to underlying elements

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

目前，当我单击覆盖div外部时，可以单击底层元素。但是，当直接单击覆盖div时，我无法单击基础元素。

我希望能够点击这个div，这样我就可以点击底层元素。

My Problem 。

是的，你可以这样做。

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

使用AlphaImageLoader，您甚至可以将透明的.PNG/.GIF放在覆盖div中，并单击流到下面的元素。

CSS：

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

IE11条件：

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

号

下面是一个包含所有代码的基本示例页面。

相关讨论

也很高兴知道…您可以禁用父元素(可能是透明的DIV)中的指针事件，但仍为其子元素启用指针事件。如果您使用多个重叠的DIV层，希望能够单击子元素，同时让父层对任何鼠标事件都不做出反应，这将非常有用。为此，所有的育儿师都得到pointer-events: none，其可点击的孩子得到pointer-events: auto重新启用的指针事件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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

<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);，ie需要像opera一样转发。

请参阅http://jsfiddle.net/vovcat/wf25q/1/和http://caniuse.com/pointer-events上的转发测试。指针事件css属性已从css3-ui移动到css4-ui。

我添加这个答案是因为我在这里没有看到完整的答案。我能用元素frompoint来做这个。所以基本上：

将单击附加到要单击的DIV
把它藏起来
确定指针所在的元素
点击那里的元素。

1
2
3
4
5
6
7
8

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上有效。

隐藏覆盖元素

确定光标坐标

获取这些坐标上的元素

触发点击元素

再次显示覆盖元素

1
2
3
4
5

$('#elementontop).click(function (e) {
$('#elementontop).hide();
$(document.elementFromPoint(e.clientX, e.clientY)).trigger("click");
$('#elementontop').show();
});

我需要这样做，决定走这条路：

1
2
3
4
5
6
7
8
9
10
11

$('.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的基本示例

所以我决定从一个数组中的气球内部收集所有的链接坐标。

1
2
3
4
5
6
7
8
9
10
11
12

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，这意味着它没有被点击。并取消将此数组移到ClickArray。你也可以用推。

要使用该数组：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

。

此函数用于验证body click事件的坐标或是否已单击该事件，并返回name属性。我认为没必要再深入一点，但你看这并没有那么复杂。希望是充满活力的…

不，不能单击"通过"元素。您可以获得单击的坐标，并尝试计算单击元素下的元素，但对于没有document.elementFromPoint的浏览器来说，这确实很麻烦。然后，您仍然需要模拟默认的单击操作，这并不一定很简单，这取决于您在下面拥有哪些元素。

因为你有一个完全透明的窗口区域，你最好在外面把它作为单独的边界元素来实现，让中心区域没有障碍物，这样你就可以直接点击了。

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

元素所占的区域可以由1找到。获取元素相对于页面左上角的位置，以及2。宽度和高度。像jquery这样的库使这个过程非常简单，尽管它可以在普通的JS中完成。在document对象上为mousemove添加事件处理程序将提供从页面顶部和左侧持续更新鼠标位置的功能。决定鼠标是否在任何给定对象上，包括检查鼠标位置是否在元素的左、右、上和下边缘之间。