Hit Test //JavaScript Repository

Description

Checks if one or more objects partially superposes the area of another.
Created: 2005.11.24 - Modified 2006.11.22

Code (Download)

//+ Jonas Raoni Soares Silva
//@ http://jsfromhell.com/geral/hittest [rev. #2]

hitTest = function(o, l){
    function getOffset(o){
        for(var r = {l: o.offsetLeft, t: o.offsetTop, r: o.offsetWidth, b: o.offsetHeight};
            o = o.offsetParent; r.l += o.offsetLeft, r.t += o.offsetTop);
        return r.r += r.l, r.b += r.t, r;
    }
    var a = arguments, j = a.length;
    j > 2 && (o = {offsetLeft: o, offsetTop: l, offsetWidth: j == 5 ? a[2] : 0,
    offsetHeight: j == 5 ? a[3] : 0, offsetParent: null}, l = a[j - 1]);
    for(var b, s, r = [], a = getOffset(o), j = isNaN(l.length), i = (j ? l = [l] : l).length; i;
        b = getOffset(l[--i]), (a.l == b.l || (a.l > b.l ? a.l <= b.r : b.l <= a.r))
        && (a.t == b.t || (a.t > b.t ? a.t <= b.b : b.t <= a.b)) && (r[r.length] = l[i]));
    return j ? !!r.length : r;
};

Example (Example)

<style type="text/css">
#menu{position: absolute; top: 80px; height: 500px; width: 200px; display: none; border: 1px solid #999; background: #eef;}
</style>

Example of how to fix the Internet Explorer problem of &lt;select&gt; elements superposing other elements. The menu will make a "hittest" against all the selects and hide the ones that superposes the menu.

<div id="menu">
    <input type="button" onclick="hide();" value="Hide Menu" />
</div>
<form action="">
    <fieldset>
    <strong>DIV x SELECT</strong>
    <br /><select><option>DIV OVER SELECT DIV OVER SELECT DIV OVER SELECT</option></select>
    <input type="button" onclick="show();" value="Show Menu" />
    </fieldset>
</form>


<script type="text/javascript">
//<![CDATA[

var m = document.getElementById("menu");

function show(){
    m.style.display = "block";
    if(!m.selects)
        m.selects = hitTest(m, document.getElementsByTagName("select"));
    for(var i = m.selects.length; i; m.selects[--i].style.visibility = "hidden");

}

function hide(){
    m.style.display = "none";
    for(var i = m.selects.length; i; m.selects[--i].style.visibility = "visible");
}

//]]>
</script>

Help

hitTest(object: HTMLElement, test: HTMLElement): Boolean
Tests if an object is inside the visible area of another object and, returns true if yes.
object
reference object
test
object that will be checked
hitTest(x: Integer, y: Integer, test: HTMLElement): Boolean
Tests if a point is inside the visible area of an object and, returns true if yes.
x
x coordinate
y
y coordinate
test
object that will be checked
hitTest(x: Integer, y: Integer, test: HTMLElement): Boolean
Tests if a rectangle is inside the visible area of an object and, returns true if yes.
x
x coordinate
y
y coordinate
w
width
h
height
test
object that will be checked
hitTest(object: HTMLElement, test: Array): Array
Tests if one or more objects are inside the visible area of another object and, returns the elements os elementos that passed the test.
object
reference object
test
object list to be checked
hitTest(object: HTMLElement, test: Array): Array
Tests if object is inside the visible area of one or more objects and, returns the elements that passed the test.
object
reference object
test
object list to be checked
hitTest(x: Integer, y: Integer, test: Array): Array
Tests if a point is inside the visible area of one or more objects and, returns the elements that passed the test.
x
x coordinate
y
y coordinate
test
object list to be checked
hitTest(x: Integer, y: Integer, test: Array): Array
Tests if a rectangle is inside the visible area of one or more objects and, returns the elements that passed the test.
x
x coordinate
y
y coordinate
w
width
h
height
test
object list to be checked

Rank (Votes: 62)

4.26