Как узнать, соприкасаются ли два элемента
С помощью JavaScript я хочу узнать, как определить, соприкасаются ли диапазон и кнопка. Я что-то видел, Element.getBoundingClientRect(). Если это способ сделать это, как мне правильно это сделать?
Я уже пытался использовать Элемент.getBoundingClientRect() но, скорее всего, не использовал его должным образом.
var span1 = document.getElementById("mySpan")
var button = document.getElementById("myButton")
if (touches(span1, button)){
...
}
@Intervalia на дисплее
Не могли бы вы добавить пример HTML-кода соприкасающихся элементов.
«mySpan» и «myButton» являются блоком отображения или встроенным дисплеем?
как насчет того, чтобы экран перекрасил эти элементы в разные строки?
как насчет поля элементов?
Возможный дубликат в stackoverflow.com/questions/2440377/…
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
getBoundingClientRect это то, что вы хотите.
Приведенный ниже код является простым примером. Возможно, вам потребуется добавить дополнительную логику.
var span1 = document.getElementById("mySpan")
var button = document.getElementById("myButton")
var clickMe = document.getElementById("clickMe")
var outer = document.getElementById("outer")
function touches(el1, el2) {
const r1 = el1.getBoundingClientRect();
const r2 = el2.getBoundingClientRect();
console.info(r1.right, r2.left);
if (r2.left - r1.right < 1) {
console.info('touching');
}
else {
console.info('not touching');
}
}
touches(span1, button);
clickMe.addEventListener('click', () => {
outer.classList.toggle('touch');
setTimeout(() => {
touches(span1, button);
},0);
});.outer {
font: 14px Tahoma;
position: relative;
}
#mySpan {
background-color: red;
}
.touch #myButton {
margin-left: -4px;
}<div id = "outer">
<span id = "mySpan">span</span>
<button id = "myButton">Button</button>
<hr/>
<button id = "clickMe">Click Me</button>
</div>Проверяет, находятся ли (встроенные элементы) элемент span и элемент button рядом друг с другом.
var span = document.getElementsByTagName("span")[0]
var btn = document.getElementsByTagName("button")[0]
if (touches(span, btn)){
console.info('touching!')
}
function touches(span, btn) {
var rect1 = span.getBoundingClientRect();
var rect2 = btn.getBoundingClientRect();
if (rect1.right == rect2.left) {
return true;
}
}<span>Span</span><button>Btn</button>Что касается блочных элементов, таких как элементы div
var div1 = document.getElementsByTagName("div")[0]
var div2 = document.getElementsByTagName("div")[1]
if (touches(div1, div2)){
console.info('Touching!')
}
function touches(div1, div2) {
var rect1 = div1.getBoundingClientRect();
var rect2 = div2.getBoundingClientRect();
if (rect1.bottom == rect2.top) {
return true;
}
}<div>Div 1</div><div>Div 2</div>Это работает, но, к сожалению, это дало мне еще одну ошибку с (из-за отсутствия лучшего слова) хитбоксами элементов <span>. Спасибо!
Начните с получения клиентского прямоугольника из двух элементов:
var span1 = document.getElementById("mySpan");
var button = document.getElementById("myButton");
var rect1 = span1.getBoundingClientRect();
var rect2 = button.getBoundingClientRect();
var overlap = (rect1.right == rect2.left || // right to left touching
rect1.left == rect2.right || // left to right touching
rect1.bottom == rect2.top || // bottom to top touching
rect1.top == rect2.bottom) // top to bottom touching
if (overlap){
// ... do your stuff
}
если одно или несколько выражений в скобках истинны, то есть касание. Если все ложны, должно быть перекрытие или не касание.
Как проверить, не перекрывает ли элемент другие элементы?
адаптировано оттуда...
Как указано во втором ответе на этот вопрос, с чистым Javascript getBoundingClientRect() является правильным подходом.
Взгляните на код ниже, он должен работать:
function touches(a, b) {
var aRect = a.getBoundingClientRect();
var bRect = b.getBoundingClientRect();
return !(
((aRect.top + aRect.height) < (bRect.top)) ||
(aRect.top > (bRect.top + bRect.height)) ||
((aRect.left + aRect.width) < bRect.left) ||
(aRect.left > (bRect.left + bRect.width))
);
}
Вы имеете в виду прикосновения, такие как
<tag><second-tag>, или прикосновения, поскольку они находятся на расстоянии всего 1 пикселя друг от друга на дисплее?