javascript - 如何判断两个元素是否接触

Question

通过JavaScript，我想了解如何确定跨度和按钮是否接触。我看到了一些东西，Element.getBoundingClientRect()。如果这是这样做的方法，我该如何正确地做到这一点？

我已经尝试过使用 Element.getBoundingClientRect() 但很可能没有正确使用它。

  var span1 = document.getElementById("mySpan")
  var button = document.getElementById("myButton")
  if(touches(span1, button)){
   ...
   }

Answer 1

检查(内联元素)span 元素和 button 元素是否彼此相邻。

var span = document.getElementsByTagName("span")[0]
var btn = document.getElementsByTagName("button")[0]

if(touches(span, btn)){
  console.log('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元素等 block 元素

var div1 = document.getElementsByTagName("div")[0]
var div2 = document.getElementsByTagName("div")[1]

if(touches(div1, div2)){
  console.log('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>