如何检测一个元素是否被另一个元素覆盖/重叠
How to detect if an element is covered/overlapped by another one?
我有一个问题,我想检测一个元素是否在一个页面中被另一个元素覆盖。
,
DOM elements
<div class="ele ele1"><p>A</p></div>
<div class="ele ele2"><p>B</p></div>
<div class="ele ele3"><p>C</p></div>
<div class="cover"><p>D</p></div>
CSS style
.ele{
display: inline-block;
width: 100px;
height: 100px;
position: relative;
}
p{
width: 100%;
text-align: center;
}
.ele1{
background-color: red;
}
.ele2{
background-color: blue;
}
.ele3{
background-color: green;
}
.cover{
position: absolute;
width: 100px;
height: 100px;
left: 300px;
top: 10px;
background: grey;
}
http://jsfiddle.net/veraWei/6v89b1fy/如何检测元素A未被覆盖而元素C被元素D覆盖?还有一件事:D的数量是不确定的。也许有E/F/G…在页面上。我感谢所有的想法或现有的例子/jQuery插件/CSS/等。
感谢你们所有人的详细回答。但我需要更简短的解释,也许一个属性表明A没有被任何元素覆盖,而C被渲染覆盖。是否有任何插件或属性存在?
为什么不试试以下方法:
1)查找元素相对于视口的位置:
rect=elt.getBoundingClientRect();
x=rect.left;
y=rect.top;
(或者可以考虑中点坐标)
2)查找位置x, y的顶部元素:
topElt=document.elementFromPoint(x,y);
3)检查顶部元素是否与原始元素相同:
if(elt.isSameNode(topElt)) console.log('no overlapping');
你在找这样的东西吗?
http://jsfiddle.net/6v89b1fy/4/var coverElem = $(".cover");
var elemArray = [];
elemArray.push($(".ele1"), $(".ele2"), $(".ele3"));
for(i=0; i< elemArray.length; i++)
{
var currElemOffset = elemArray[i].offset();
var currElemWidth = elemArray[i].width();
var currElemStPoint = currElemOffset.left ;
var currElemEndPoint = currElemStPoint + currElemWidth;
if(currElemStPoint <= coverElem.offset().left && coverElem.offset().left <= currElemEndPoint)
{
elemArray[i].append("<span>Covered</span>");
}
else
{
elemArray[i].append("<span>Not covered</span>");
}
}
下面是一个快速示例,说明您可以如何执行此操作。这将检查垂直和水平重叠。这是一种通用的和不那么通用的,因为这是基于HTML在你的问题。调整.cover
的上/左值,以确保它适用于所有可能的情况。
var $cover = $(".cover"),
cWidth = $cover.width(),
cHeight = $cover.height(),
cLeft = $cover.offset().left,
cRight = $(window).width() - (cLeft + cWidth),
cTop = $cover.offset().top,
cBtm = $(window).height() - (cTop + cHeight);
$("div:not(.cover)").each(function() {
var $this = $(this),
eleWidth = $this.width(),
eleHeight = $this.height(),
eleLeft = $this.offset().left,
eleTop = $this.offset().top,
eleRight = $(window).width() - (eleLeft + eleWidth),
eleBtm = $(window).height() - (eleTop + eleHeight);
if (
cLeft < (eleLeft + eleWidth) &&
cRight < (eleRight + eleWidth) &&
cTop < (eleTop + eleHeight) &&
cBtm < (eleBtm + eleHeight)
) {
alert($this.text() + " is covered by " + $cover.text());
}
});
.ele {
display: inline-block;
width: 100px;
height: 100px;
position: relative;
margin-top: 40px;
}
p {
width: 100%;
text-align: center;
}
.ele1 {
background-color: red;
}
.ele2 {
background-color: blue;
}
.ele3 {
background-color: green;
}
.cover {
position: absolute;
width: 100px;
height: 100px;
left: 60px;
top: 110px;
background: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ele ele1">
<p>A</p>
</div>
<div class="ele ele2">
<p>B</p>
</div>
<div class="ele ele3">
<p>C</p>
</div>
<div class="ele ele3">
<p>D</p>
</div>
<div class="ele ele3">
<p>E</p>
</div>
<div class="ele ele3">
<p>F</p>
</div>
<div class="ele ele3">
<p>G</p>
</div>
<div class="cover">
<p>COVER</p>
</div>
OK。我已经遍历了所有重叠的情况,并让创建了这个小提琴。我已经使用了getBoundintClientRect()
,并使用它来获得top
, left
, bottom
, right
的两个div
的值,这些值要检查重叠,然后我使用各种条件语句和条件来比较偏移量,您将在下面找到。在小提琴所有你的四个元素都有position: absolute
,调整他们的top
和left
的值,使他们相互重叠,并检查两个元素是否重叠?传递函数中的两个元素-
checkElements(elA, elB); // pass two elements to check
在最后。
你会看到长if
else
条件在小提琴,他们只是为了测试所有的重叠的可能性。这里是用于检查重叠的所有可能条件 -
if((eleB.top >= eleA.top && eleB.top <= eleA.bottom) || (eleB.bottom >= eleA.top && eleB.bottom <= eleA.bottom)) {
if((eleB.left >= eleA.left && eleB.left <= eleA.right) || (eleB.right >= eleA.left && eleB.right <= eleA.right)) {
el1.innerHTML = '<p>covered</p>';
}
else {
el1.innerHTML = '<p>not covered</p>';
}
}
else {
el1.innerHTML = '<p>not covered</p>';
}
你也会看到如果B与A重叠,那么它会写A被覆盖,因为我已经比较了A和B的x和y坐标。在这种情况下,我认为将使用额外的条件检查z-index
。
检查小提琴,调整不同元素的top
和left
的值,然后在函数checkElements()
中传递两个元素,看结果是否正确。
您也可以同时执行所有检查,如-
checkElements(elA, elB); // check if A is overlapped by B
checkElements(elB, elC); // check if B is overlapped by C
checkElements(elC, elD); // check if C is overlapped by D
使用多重检查查看此提琴
EDIT:如果循环是问题,那么您可以将if
else
的所有循环组合成单个if
else
,像这样-
if(((eleB.top >= eleA.top && eleB.top <= eleA.bottom) || (eleB.bottom >= eleA.top && eleB.bottom <= eleA.bottom)) && ((eleB.left >= eleA.left && eleB.left <= eleA.right) || (eleB.right >= eleA.left && eleB.right <= eleA.right))) {
el1.innerHTML = '<p>covered</p>'; // or your code of adding true to the attribute that tells about overlapping
}
else {
el1.innerHTML = '<p>not covered</p>';
}
更新小提琴
- javascript数组元素是否知道其封闭数组
- 如何检查元素是否在iframe中
- 检查元素是否将状态从隐藏更改为可见
- 确定元素是否存在
- 消隐数组元素是否生成自己的属性
- 检查一个元素是否有一个类与另一个类总是返回true
- 如何检查日期选择器和时间选择器元素是否使用JQuery/Javascript设置
- 如何查找具有该ID的元素是否存在
- 检查元素是否已单击或hasClass
- 使用webdriver和selenium验证元素是否不存在
- 如何使用jQuery实时检查元素是否为空
- html元素是否具有内置的属性
- 检查元素是否有内容
- 使用 javascript 检查元素是否包含子标记而不是文本
- JavaScript 在 JSON 对象中移动如何判断元素是否存在
- 检查两个或多个 DOM 元素是否重叠
- 谷歌地球插件 — 如何检查带有 ID 的元素是否已经存在
- 检查元素是否悬停在上面
- DOM 元素是否可以具有其值为任意对象(而不是字符串)的属性
- 如何检查DOM元素是否已完全加载