[英]Can javascript tell if element is on top other element?
javascript可以判斷元素是否在其他元素之上？
考慮這個標記：
<!doctype html>
<html>
<style>
section div {width: 100px; position: absolute; border: 1px solid black; }
</style>
<body>
<section>
<div id="div1" style="height: 400px; background: blue;"></div>
<div id="div2" style="height: 300px; background: red;"></div>
<div id="div3" style="height: 200px; background: yellow;"></div>
<div id="div4" style="height: 100px; background: green;"></div>
</section>
</body>
</html>
我怎么知道（例如）div3 下是否有內容？
好吧，如果有人想知道兩個元素是否重疊，我將無法理解行為……超出了正確答案。
function overLaps(el1, el2) {
const a = el1.getBoundingClientRect();
const b = el1.getBoundingClientRect();
if (a.top < b.top && a.bottom > b.top) return true;
if (a.top < b.bottom && a.bottom > b.bottom) return true;
if (a.left < b.left && a.left > b.left) return true;
if (a.left < b.right && a.left > b.right) return true;
return false;
}
原始答案：
您需要檢查父級/樹中的元素的zIndex，偏移位置和順序。 這將需要一些遞歸，並且取決於深度，可能會有些麻煩。 如果要控制渲染/調整，則使用數據模型/控制器進行碰撞檢測可能會更容易。
這是我認為應該起作用的代碼（它是偽代碼）
var div3_position = document.getElementById('div3').getBoundingClientRect(); var divs = document.getElementsByTagName("div"); var inner_div_pos = null; var div3_zindex = getStyle('div3', "zIndex"); var zInd = null; for (var i = 0; i < divs.length; i++) { if (divs[i].id !== 'div3') { inner_div_pos = divs[i].getBoundingClientRect(); zInd = getStyle(divs[i].id, "zIndex"); if (!doesPointCollide(inner_div_pos) && zInd < div3_zindex) { console.log('element is under'); } } } function doesPointCollide(p) { return !(px < div3_position.left || px > div3_position.right || py > div3_position.bottom || py < div3_position.top) } function getStyle(el, styleProp) { var x = document.getElementById(el); if (window.getComputedStyle) { var y = document.defaultView.getComputedStyle(x, null).getPropertyValue(styleProp); } else if (x.currentStyle) { var y = x.currentStyle[styleProp]; } return y; }
如果div下方有某些內容，則下面的代碼將返回true。 在您的示例中，它對除 div1 之外的所有div返回true，因為它的高度大於其他高度。
const isOnTop = (id) => {
let element = document.querySelector(id),
divs = document.querySelectorAll('section div');
return [...divs].some(div =>
div.getBoundingClientRect().bottom > element.getBoundingClientRect().bottom
);
}
const isOnTop = (id) => { let element = document.querySelector(id), divs = document.querySelectorAll('section div'); return [...divs].some(div => div.getBoundingClientRect().bottom > element.getBoundingClientRect().bottom ); } console.log(isOnTop('#div1')); // false console.log(isOnTop('#div2')); // true console.log(isOnTop('#div3')); // true console.log(isOnTop('#div4')); // true
section div { width: 100px; position: absolute; border: 1px solid black; }
<section> <div id="div1" style="height: 400px; background: blue;"></div> <div id="div2" style="height: 300px; background: red;"></div> <div id="div3" style="height: 200px; background: yellow;"></div> <div id="div4" style="height: 100px; background: green;"></div> </section>
改進@Tracker1 的響應，
// Checks if two elements collide
const elementsColliding = function (el1, el2) {
const a = el1.getBoundingClientRect()
const b = el2.getBoundingClientRect()
if (
((a.top < b.top) && ((a.top+a.height) > b.top)) ||
((a.bottom < b.bottom) && ((a.bottom+a.height) > b.bottom)) ||
((a.left < b.left) && ((a.left+a.width) > b.left)) ||
((a.right < b.right) && ((a.right+a.width) > b.right))
) {
return true
}
return false
}
這會檢查兩個元素是否以任何方式碰撞。 不知道為什么原來的答案對我a.left < b.left && a.left > b.left ..但是a.left < b.left && a.left > b.left並不是真的什么都不做，因為這是一個不可能的陳述。 此外，上一個答案不是檢查元素是否部分接觸（例如 el1 x 軸：60 到 80，el2 y 軸 79 到 100）
通過JavaScript將樣式頂部添加到其他高度元素的ID元素中
[英]Add style top to ID Element of other height Element by JavaScript
如何使用 vanilla javascript 判斷元素的頂部或底部何時滾動到頁面頂部
[英]How do I tell when the top or bottom of an element scrolls to the top of the page using vanilla javascript
除了通過用html元素包裝每個字符之外，javascript / jquery / etc中是否有辦法判斷元素中的哪個字母被單擊？
[英]Other than by wrapping each character with an html element, is there a way in javascript/jquery/etc to tell which letter in an element was clicked on?
你能告訴一個元素是否使用JavaScript觸及另一個元素嗎？
[英]Can you tell if one element is touching another using JavaScript?
如何判斷HTML5音頻元素是否正在播放Javascript
[英]How can I tell if an HTML5 Audio element is playing with Javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.