Hit Test //Repositório JavaScript

Descrição

Verifica se um ou mais objetos se encontram parcialmente dentro da área de um outro.
Criado: 2005.11.24 - Modificado 2006.11.22

Código (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;
};

Exemplo (Exemplo)

<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>

Ajuda

hitTest(object: HTMLElement, test: HTMLElement): Boolean
Testa se um objeto está dentro da área visível de um outro objeto e, retorna true caso afirmativo.
object
objeto de referência
test
objeto que será checado
hitTest(x: Integer, y: Integer, test: HTMLElement): Boolean
Testa se um ponto está dentro da área visível de um objeto e, retorna true caso afirmativo.
x
coordenada x
y
coordenada y
test
objeto que será checado
hitTest(x: Integer, y: Integer, w: Integer, h: Integer, test: HTMLElement): Boolean
Testa se um retângulo está dentro da área visível de um objeto e, retorna true caso afirmativo.
x
coordenada x
y
coordenada y
w
largura
h
altura
test
objeto que será checado
hitTest(object: HTMLElement, test: Array): Array
Testa se um objeto está dentro da área visível de um ou mais objetos e, retorna os elementos que estiverem.
object
objeto de referência
test
lista de objetos que serão checados
hitTest(x: Integer, y: Integer, test: Object): Boolean
Testa se um ponto está dentro da área visível de um ou mais objetos e, retorna os elementos que estiverem.
x
coordenada x
y
coordenada y
test
objeto que será checado
hitTest(x: Integer, y: Integer, w: Integer, h: Integer, test: Object): Boolean
Testa se um retângulo está dentro da área visível de um ou mais objetos e, retorna os elementos que estiverem.
x
coordenada x
y
coordenada y
w
largura
h
altura
test
objeto que será checado

Ranque (Votos: 59)

4.32