Problema con onclick y div anidados

cesarbene · #1 (**permalink**) 28/06/2012, 12:47

Hola,

tengo un problema con un sitio web: tengo varios div anidados:

<div id="div1"...>
<div id="div2"...>

...

</div>
</div>

Pues bien, si en div1 pongo lo siguiente:

<div id="div1" onclick="location.href='ENLACE';">

on objeto de que cuando hago click dentro de div1 vaya a ese enlace, también va al enlace cuando hago click dentro de div2 (estando div2 dentro de div1), y eso es lo que no quiero.

Como habréis podido intuir algunos, he puesto una imagen de fondo (en el archivo CSS) con un enlace, pero me lo hace en todos los div...

Como puedo evitarlo?? Echadme una mano, por favor...

Muchas gracias!!

IsaBelM · #2 (**permalink**) 28/06/2012, 14:14

prueba con esto

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="application/xhtml; charset=utf-8" />
<title></title>
<script type="text/javascript">
function fnc(e) {
evt = (e.target) ? e.target : window.event.srcElement;
if(evt.parentNode.tagName == 'DIV' && evt.parentNode.id == 'div1') return false;
location.href='ENLACE';
}

window.onload = function() {
if(document.addEventListener) {
document.addEventListener('click', function(event) {fnc(event)}, false);
} else {
document.attachEvent('onclick', function(event) {fnc(event)});
}
};
</script>
<body>

<div id="div1">
si
<div id="div2">
no
</div>
</div>

<div id="div3">
si
</div>

</body>
</html>

cesarbene · #3 (**permalink**) 30/06/2012, 04:11

Gracias, IsabelM. Lo he probado y sigue igual...

IsaBelM · #4 (**permalink**) 30/06/2012, 07:35

entonces es esto otro lo que quieres

Cita:

function fnc(e) {
evt = (e.target) ? e.target : window.event.srcElement;
if(evt.tagName == 'DIV' && evt.id == 'div1') {
location.href='ENLACE';
} else {
return false;
}
}

furoya · #5 (**permalink**) 30/06/2012, 09:13

¿Y cancelando el burbujeo en el mismo div?

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<script type="text/javascript">
function glubglub(e){
if (e.stopPropagation) e.stopPropagation(); 
else window.event.cancelBubble = true;
}
</script>
</head>
<body>
<div id="div1" onclick="location.href='about:blank'" style="background: lime;">
<div id="div2" onclick="glubglub(event)" style="margin:50px; background: red;">

...

</div>
</div>
</body>
</html>

Sería otra forma, más directa al evento que trae problemas. Aunque haya que escribirlo.

emprear · #6 (**permalink**) 30/06/2012, 12:10

A ver esta variante si te sirve

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
#div1{
width: 500px;
height: 500px;
background: red;
}
#div2{
width: 300px;
height: 300px;
background: green;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
var estado = 0;
function funcion(){
if(estado == 0){
window.location.href ='http://emprear.com';
}
}
//]]>
</script>
</head>
<body>
<div id="div1" onclick="funcion();">
<div id="div2" onmouseover="estado =1;" onmouseout="estado = 0;">
Div2
</div>
</div>
</body>
</html>

Saludos

cesarbene · #7 (**permalink**) 30/06/2012, 12:44

He probado lo que dice furoya y me ha funcionado!! Con vuestra ayuda he resuelto el problema!

Muchas gracias a todos!!!

IsaBelM · #8 (**permalink**) 30/06/2012, 14:54

furoya, interesante tu propuesta (los dos buscamos la solución mas compleja). lastima que stopPropagation() no es compatible con ie8- y cancelBubble está desfasado. más interesante aún, y nada que objetar, es la opción de sobrescribir una variable que propone emprear.
peroooooooo ...... aquí viene el pero

evitemos el uso o mal uso (dependencia) de javascript

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
#div1{
width: 500px;
height: 500px;
background: red;
}
#div1 a{
display: block;
height: 500px;
}
#div2{
width: 300px;
height: 300px;
background: green;
position: relative;
top: -500px;
left: 0;
}
/*]]>*/
</style>
</head>
<body>
<div id="div1">
<a href="http://emprear.com"></a>
<div id="div2">Div2</div>
</div>
</body>
</html>

furoya · #9 (**permalink**) 30/06/2012, 14:57

De nada, cesarbene, me alegra que lo hayas resuelto, porque pienso en el próximo invento que alguien iba a postear acá, y me da un escalofrío por la espalda.

( )

[edit]

Bueno, leo que posteamos casi juntos, pero no vi tu mensaje hasta ahora, IsaBelM.

Es un asunto bastante tratado, pero me pareció que podíamos agregar (o repetir) algo más.

Tu método es "complejo", pero muy instructivo para quien no necesita en verdad arreglar su problema, sino que aprovecha para aprender un mecanismo más.

Lo de evitar que el click se trepe hacia su padre (y abuelo, y bisabuelo, y...) es un modo clásico. Y no hay otras variantes : o se "cancela la burbuja" o se "detiene la propagación"; uno de los dos va a funcionar.

Lo de condicionar el evento a una variable ... es una cachetada de payaso: efectiva, pero no es seria. Aunque yo no soy el más indicado para quejarme por eso.

(Bah, en realidad hubo un motivo personal para postear el código, pero quizá te lo comente en privado. (Y no va a hacer falta que me respondas, ni te preocupes.)

Dos detalles de tu último ejemplo. El ancla debería ajustarse al padre, previendo un cambio de tamaño. Y la idea era que se usara JS, no sé por qué, ya que el mensaje original no lo explicaba, pero si lo hizo así, es porque lo necesitaba así.
Igual es muy ingenioso, y es de ese tipo que me producen repeluces. Lo mencioné antes de verlo, pero era lo que temía.

Por último, di un +1 al mensaje de emprear, pero si posteaste justo antes que yo, puede que haya clickeado en el tuyo por confusión. Como no podemos ver quiénes y por qué les ponen las valoraciones, no puedo estar seguro. Si le erré, el mensajito no era para ti. No recuerdo que barbaridad le puse, pero no era para ti.

[/edit]

IsaBelM · #10 (**permalink**) 01/07/2012, 07:18

el código de mi primer se me ocurrió retorciendo otro código que se trataba de hacer del body un vinculo. es decir que si no se clickeaba en algún elemento del body, se redireccionaría. para ello sólo hay que evaluar que el elemento padre del elemento pulsado es <html>

mi segundo código, era para tocar un poco los ***** y por que tengo la impresión que las dimensiones son estáticas

no dijistes ninguna burrada. usaste dos frases casi literales de la parte editada

furoya · #11 (**permalink**) 01/07/2012, 07:59

Cita:

Iniciado por IsaBelM

el código de mi primer se me ocurrió retorciendo otro código que se trataba de hacer del body un vinculo. es decir que si no se clickeaba en algún elemento del body, se redireccionaría. para ello sólo hay que evaluar que el elemento padre del elemento pulsado es <html>

Sí, esa idea es excelente. Es justamente por lo que muchos terminan leyendo estos mensajes, porque si bien aparecen respuestas "desproporcionadas" a la pregunta, te dejan más métodos para más inventos.

mi segundo código, era para tocar un poco los ***** y por que tengo la impresión que las dimensiones son estáticas

Temo preguntar qué anduviste "tocando", que el foro te lo enmascaró.
Y tu argumentación es acertada, el error quizá fue mío, que no vi que se usaba la caja como "imagen", que tiene medidas fijas.

no dijistes ninguna burrada. usaste dos frases casi literales de la parte editada

Perfecto (fiuuu...); entonces sí me equivoqué, y te clickeé el botón a ti.
Ahora reparo mi error y me tiro de palomita sobre el +1 de emprear.
De cualquier forma, considérate masunomenada de mi parte, porque tu participación fue valiosa como siempre.
(O casi... )

emprear · #12 (**permalink**) 01/07/2012, 14:06

Cita:

Iniciado por furoya

Lo de condicionar el evento a una variable ... es una cachetada de payaso: efectiva, pero no es seria.

Don @furoya, me dice que modelo me recomienda por favor?

Si le erré, el mensajito no era para ti. No recuerdo que barbaridad le puse, pero no era para ti.

Eso me genera una duda para nada existencial, ¿Para quien y cual sería la varvaridad?

Saludos

furoya · #13 (**permalink**) 01/07/2012, 20:03

Como digo siempre : "este Foro ya no es serio".
No voy a preguntar por el origen de las fotos ...

(La segunda es más 'casual', aunque para una reunión de directorio, sin dudas la primera.)

No te cuento qué decía la valoración porque ya me enteré que se pasaron el chisme.
Como digo siempre : "en este Foro ya no se puede guardar un secreto".