如何检测重叠元素下的点击？ [英] How to detecting a click under an overlapping element?
问题描述
我有两个HTML文档， b.html 包含 c.html 使用 iframe 。
I have two HTML documents, b.html contains c.html using an iframe.
在 b.html 我需要绘制一些DIV（在我的示例id =选择器），部分涵盖 c.html 的内容，在 iframe 中可视化。
On b.html I need to draw some DIV (in my example id=selector), which partially cover content of c.html visualized in the iframe.
我需要获取与DIV选择器下鼠标坐标对应的DOM元素的ID。
目前直接在 c.html 中使用 document.elementFromPoint（）部分工作，就像当鼠标一样它在DIV选择器上我无法识别 c.html 中的底层DOM元素（在此示例中为DIV c）。
At the moment Using document.elementFromPoint() directly in in c.html works partially, as when the mouse it is on DIV selector I cannot identify the underling DOM element in c.html (in this example DIV c).
我需要知道：
- 是否可以使用document.elementFromPoint（）或任何其他方法选择另一个元素？
- 可能使用DOM和本机API的替代解决方案是什么？
此处示例（PLE看看Chrome中的控制台）：
Example here (Please look at the console in Chrome):
http： //jsfiddle.net/s94cnckm/5/
--------------------- -------------------------- b.html
----------------------------------------------- b.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>B</title>
<script type="text/javascript">
window.app = {
start: function () {
}
};
</script>
<style>
#selector {
position: absolute;
top: 150px;
left: 150px;
width: 250px;
height: 250px;
-webkit-box-shadow: 0px 0px 0px 5px yellow;
-moz-box-shadow: 0px 0px 0px 5px yellow;
box-shadow: 0px 0px 0px 5px yellow;
}
#iframe {
width: 500px;
height: 500px;
border: none;
}
</style>
</head>
<body onload="app.start();">
<div id="selector">SELECTOR</div>
<iframe id="iframe" src="c.html"></iframe>
</body>
</html>
--------------------- -------------------------- c.html
----------------------------------------------- c.html
<html lang="en">
<head>
<meta charset="utf-8" />
<title>C</title>
<script type="text/javascript">
window.app = {
start: function () {
document.querySelector('body').addEventListener('mousemove', function (event) {
//console.log(event.pageX, event.pageY, event.target.id);
var item = document.elementFromPoint(event.pageX, event.pageY);
console.log(item.id);
}.bind(this));
}
};
</script>
<style>
body {
background-color: lightslategray;
}
#a {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: green;
z-index: 2;
}
#b {
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
background-color: #ffd800;
z-index: 1;
}
</style>
</head>
<body onload="app.start();">
<h1>Content</h1>
<div id="a">a</div>
<div id="b">b</div>
</body>
</html>
推荐答案
可能的解决方法是使用 pointer-events 。
A possible soltion is the usage of pointer-events.
CSS属性指针事件允许作者控制特定图形元素在
情况下（如果有的话）可以成为
鼠标事件的目标。如果未指定此属性，则visiblePainted值的相同
特征将应用于SVG内容。
The CSS property pointer-events allows authors to control under what circumstances (if any) a particular graphic element can become the target of mouse events. When this property is unspecified, the same characteristics of the visiblePainted value apply to SVG content.
申请时
#selector {
/* ... */
pointer-events: none;
}
所有内容 #selector 并且元素本身不再具有交互性。可能未选择内容，并且：hover 或点击等事件不适用。
All content of #selector and the element itself are no more interactive. Content may not be selected and events like :hover or click are not applicable.
以下是上述css的演示： http://jsfiddle.net/s94cnckm/ 6 /
Here is the demo with the above css: http://jsfiddle.net/s94cnckm/6/
这篇关于如何检测重叠元素下的点击？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
