2010-02-15 9 views
15

tengo esta página HTMLjQuery: obtener un clic del ratón, si dentro de un div o no

<html> 
<body> 
<div>a</div> 
<div>b</div> 
<div>c</div> 
<div>d</div> 
<div id='in_or_out'>e</div> 
<div>f</div> 
</body> 
</html> 

a, b, c, d, eyf podría ser divs también no sólo un texto sin formato.

Deseo obtener el evento de clic del mouse, pero ¿cómo podría saber si está dentro o fuera #in_or_out div?

EDIT :: chicos, saben cómo comprobar si el div es hacer clic o no, pero yo quiero que mi evento que se desencadena cuando el clic es fuera de ese div

+0

No creo que haya una manera de anular un selector, como: 'dame todos los divs donde id es diferente a xy'. Debería activar el evento y luego manejar la exclusión dentro de la función .. – harpax

Respuesta

24
$("body > div").click(function() { 
    if ($(this).attr("id") == "in_or_out") { 
     // inside 
    } else { 
     // not inside 
    } 
}); 

EDIT: acaba de aprender, que hay una negate:

$("body > div:not(#in_or_out)").click(function(e) { 
    // not inside 
}); 
+4

+1 para vincular solo a elementos div . – karim79

3

para el interior sería

$("#in_or_out").click(function() { 
    // do something here 
}); 

por fuera ... No tengo ni idea.

Editar: Puede intentar hacer lo mismo para body-tag (asignando un manejador de clics al documento en sí). Pero no estoy seguro si ambos eventos dispararían por eso.

+0

Esto debería ser una solución. –

4

Depende de lo que quieras. Si sólo desea ejecutar código, cuando era dentro#in_or_out, que puede hacer:

$('#in_or_out').click(function(){ /* your code here */ }); 

Usted puede tener una variable de estado que indica si el ratón está en #in_or_out o no:

var inside = false; 

$('#in_or_out').hover(function() { inside = true; }, function() { inside = false; }); 

Luego, cuando se produce un clic, puede verificar con inside si el clic estaba dentro de in_or_out o no.

Referencia: .hover()

Actualización:

No importa a qué elemento se unen al controlador de click, siempre se puede hacer esto:

$('element').click(function() { 
    if ($(this).attr('id') !== 'in_or_not') { 

    } 
}); 
+0

Solo recuerda 'in' es una palabra clave en javascript y no está permitido como nombre de variable ;-) –

+0

@Ande E: Sí, lo noté, lo cambié;) Gracias de todos modos :) –

1

gusta esta?

$("#in_or_out").click(function() { 
    alert("IN DIV!"); 
}); 
9

Si desea detectar si o no haber hecho clic dentro o fuera del div, establece el controlador de eventos en el documentElement y dejar que se propagan de los otros elementos hacia arriba:

$("html").click(function (e) 
{ 
    if (e.target == document.getElementById("in_or_out")) 
     alert("In"); 
    else 
     alert("Out!"); 
}); 
+3

+1 para 'e.target' – karim79

+0

¡gracias, señor! –

+0

Esto no funcionará si div (#in_or_out) contiene otros elementos y el usuario hace clic en el elemento interior. Verifique este ejemplo https://jsfiddle.net/opd3ktdf/4/ – Avi

7

Tal vez éste le ayudará a

$('body').click(function(){ 
    //do smth 
}); 
$('div#in_or_out').click(function(e){ 
    e.stopPropagation(); 
    // do smth else 
}); 
Cuestiones relacionadas