How to tell if two elements are touching

Question

Through JavaScript, I want to find out how to find whether a span and a button are touching. I saw something, Element.getBoundingClientRect(). If that is the way to do it, how do I properly do it?

I've already attempted to use Element.getBoundingClientRect() but most likely not used it properly.

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

Do you mean touching like `` or touching as in they are only 1 pixel apart on the display? — Intervalia, Apr 22 '19 at 22:28
"mySpan" and "myButton" are display block or display inline ? — Mister Jojo, Apr 22 '19 at 22:36
what about if screen redim place those element on different lines ? — Mister Jojo, Apr 22 '19 at 22:37
Possible duplicate in https://stackoverflow.com/questions/2440377/javascript-collision-detection — piraces, Apr 22 '19 at 22:40

Khalid Ali · Accepted Answer · 2019-04-22T22:49:16.700

Checks if (inline elements) a span element and button element are next to each other.

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>

As for block elements such as div elements

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>

It works, but unfortunately it gave me another bug with the (for lack of better word) hitboxes of elements. Thank you! — Squill.is.me, Apr 23 '19 at 01:49

score 1 · Answer 2 · answered Apr 22 '19 at 22:46

As specified in the second response to this question, with pure Javascript, getBoundingClientRect() is a correct approach.

Take a look at the code below, this should do the work:

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))
  );
}

score 0 · Answer 3 · answered Apr 22 '19 at 22:41

getBoundingClientRect is what you want.

The code below is a simple example. You may need to add additional logic.

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.log(r1.right, r2.left);
  
  if (r2.left - r1.right < 1) {
    console.log('touching');
  }
  else {
    console.log('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>

score 0 · Answer 4 · answered Apr 22 '19 at 22:44

Start by getting the client rect of the two elements:

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
}

if one or more expressions in the parenthese are true, there's touching. If all are false, there must be an overlapping or not touching.

How to check if an element is overlapping other elements?

adapted from there...

How to tell if two elements are touching

4 Answers4