Detect collision (the wrong way)

http://stackoverflow.com/questions/29916874/can-you-tell-if-one-element-is-touching-another-using-javascript

by Gerald Fullam

HTML

<div class="box" id="box1"></div>
<div class="box clickable" id="box2"></div>
<div class="box clickable" id="box3"></div>

CSS

#box1 {
    background-color: LightSeaGreen;
}
#box2 {
    top: 25px;
    left: -25px;
    background-color: SandyBrown;
}
#box3 {
    background-color: SkyBlue;
}
.box {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 100px;    
}
.clickable {
    cursor: pointer;
}

JavaScript

var box2 = document.getElementById('box2'),
    box3 = document.getElementById('box3');
box2.onclick = detectCollision;
box3.onclick = detectCollision;

function detectCollision(e) {
    var elem        = e.target,
        elemOffset  = elem.getBoundingClientRect(),
        elemDisplay = elem.style.display;
    
    // Temporarily hide element
    elem.style.display = 'none';
    
    // Check for top-most element at position
    var topElem = document.elementFromPoint(elemOffset.left, elemOffset.top);

    // Reset element's initial display value.
    elem.style.display = elemDisplay;

    // If a top-most element is another box
    if (topElem.className.match(/box/)) {
        alert(elem.id + " is touching " + topElem.id);
    } else {
        alert(elem.id + " isn't touching another box.");
    };
}