Как определить, когда элемент находится над другим элементом в JavaScript?
Я написал большую часть кода . И когда элемент «полностью» над другим элементом, он работает. Проблема в том, что я не просто хочу, чтобы он был истинным, когда элемент «полностью» над элементом, я также хочу, чтобы он был истинным, когда элемент частично находится над другим элементом.
element = this.element.getStyles('left', 'top', 'width', 'height'); elementLeftX = element.left.toInt(); elementLeftY = element.top.toInt(); elementRightX = (element.width.toInt() + element.left.toInt()); elementRightY = (element.top.toInt() + element.height.toInt()); el = this.positions ? this.positions[i] : this.getDroppableCoordinates(el); // Element drop area elLeftX = el.left.toInt(); elLeftY = el.top.toInt(); elRightX = (el.width.toInt() + el.left.toInt()); elRightY = (el.height.toInt() + el.top.toInt()); if (((elLeftY else < return false; >> else Я очень сбит с толку, некоторое время я играл, и я просто не могу заставить его работать.
3 ответа
Стандартный метод видеоигры:
doElsCollide = function(el1, el2) < el1.offsetBottom = el1.offsetTop + el1.offsetHeight; el1.offsetRight = el1.offsetLeft + el1.offsetWidth; el2.offsetBottom = el2.offsetTop + el2.offsetHeight; el2.offsetRight = el2.offsetLeft + el2.offsetWidth; return !((el1.offsetBottom < el2.offsetTop) || (el1.offsetTop >el2.offsetBottom) || (el1.offsetRight < el2.offsetLeft) || (el1.offsetLeft >el2.offsetRight)) >; Посмотреть демо
Если вы заинтересованы в использовании jQuery (или если вы уже это делаете), есть несколько отличных плагинов для обнаружения столкновений. Вот предыдущий ответ с подробным описанием https://stackoverflow.com/a/6052254/374866
Когда вы пытаетесь это называется «обнаружение столкновений». Вам необходимо получить смещения и размеры элемента COMPUTED, а не только объявления стиля элемента.
Эта публикация может помочь объяснить:
Может ли javascript сказать, находится ли элемент над другим элементом?
Может ли javascript сказать, находится ли элемент над другим элементом?
Как я могу узнать (например), есть ли что-то под div3?
4 ответа
Код ниже вернет true, если что-то находится под div , В вашем примере это возвращает true для всех div с исключением div1 потому что его высота больше, чем у других.
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Вот код, который я думаю, должен работать (это псевдокод)
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 !(p.x < div3_position.left || p.x >div3_position.right || p.y > div3_position.bottom || p.y < 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; >Ладно, я не понял поведение. за пределами правильного ответа, если кто-то хочет знать, перекрываются ли два элемента.
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, позиции смещения и порядка. Это потребует немного рекурсии и в зависимости от глубины может быть немного громоздким. Если вы управляете рендерингом / корректировками, может быть проще выполнить обнаружение столкновений с вашей моделью данных / контроллером.
Улучшение ответа @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 на самом деле ничего не делает, потому что это невозможное утверждение. Кроме того, предыдущий ответ не проверяет, соприкасаются ли элементы частично (например, ось x el1: от 60 до 80, ось y el2 с 79 до 100)
Может ли javascript определить, находится ли элемент поверх другого элемента?
Может ли javascript определить, находится ли элемент поверх другого элемента?
Как я могу узнать (например), есть ли что-то под div3?
Вы хотите просто обнаружение столкновений (что-то касается div3 ) или проверку позиций всех элементов?
@JackBashford да, но только в этом конкретном разделе и только для div.
Когда вы говорите «под», вы имеете в виду, что это родственный элемент или «под», поскольку в div3 визуально закрывает какой-то другой элемент?
вы можете получить ограничительную рамку div3, используя getBoundingClientRect(), и перебрать все абсолютные элементы позиции, получить их ограничительную рамку и проверить, находится ли она внутри ограничительной рамки div3 и имеет ли z-индекс больше, чем div3. Примечание: если они оба имеют одинаковый z-индекс, div, появившийся позже в дереве DOM, будет выше.
@EvanTrimboli я имею в виду визуально под / на другом div.
этот вопрос stackoverflow.com/questions/3735278/…, вероятно, поможет. Хотя вместо события клика вы бы использовали позицию div для координат. вы можете проверить z-index на видимость
@kanhaishah я не знал, что есть что-то вроде getBoundingClientRect(). я читаю об этом прямо сейчас. Не могли бы вы быть добры и опубликовать пример?
@kanhaishah это именно то, что я сейчас читаю.
@RickHitchcock на самом деле div4 находится выше всех остальных 3.
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в.
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир.
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -.
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний.
Все внешние компоненты, рассмотренные здесь до сих пор, взаимодействуют с клиентской стороной. Однако, если они подвергаются атаке, они не.
Ответы 4
Хорошо, я не понял поведения. помимо правильного ответа, если кто-то хочет знать, пересекаются ли два элемента.
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, позицию смещения и порядок. Это потребует небольшой рекурсии и, в зависимости от глубины, может быть немного громоздким. Если вы управляете рендерингом/настройками, может быть проще выполнить обнаружение столкновений с вашей моделью данных/контроллером.
Спасибо за ваш ответ. я намеренно не устанавливал z-index, потому что я хочу изменить позицию, если условие истинно. Если я пойму, как узнать, есть ли под ним div, я сдвину последний на 100 пикселей вправо.
Итак, вы хотите знать, есть ли перекрытие между двумя элементами общего родителя? Вы захотите проверить следующие свойства. offsetTop offsetLeft offsetHeight offsetWidth , и если один находится внутри диапазона другого. между top и top+height и между left и left+width для эффективных левых/правых значений второго элемента.