Onclick en el <body>

enchufe · #1 (**permalink**) 03/07/2012, 11:46

Hola en mi pagina tengo lo siguiente:

<body onclick="location.href='http://ejemplo.com'">

y me funciona a la perfección, cuando hago click en cualquier parte del body me lleva a ejemplo.com y si hago click en un enlace a otro sitio el link funciona perfectamente llevandome al link que clicke.

Ahora mi problema es que tengo que cambiar el javascript del onclick para trackear con analytics esos clickcs.

<body onclick="funcion('ejemplo.com', 'categoria', 'contenedor');">

Con esta llamada a la "funcion" no me funciona nada de lo que tengo en el body.
Es decir si hago click en cualquier enlace o lugar de mi pagina se dispara la funcion y no sirve nada de la pagina.

No entiendo porque se comportan diferente y como puedo hacer para que solo se dispare la "funcion" en caso de que el click no sea sobre objetos o enlaces de la pagina.

lubtufano · #2 (**permalink**) 03/07/2012, 16:20

Cita:

Iniciado por enchufe

como puedo hacer para que solo se dispare la "funcion" en caso de que el click no sea sobre objetos o enlaces de la pagina.

Hay que cancelar el burbujeo de eventos con esta función:

Código Javascript:

Ver originalfunction detenerBurbujeo(e)
{
  if(window.event)
  {
    window.event.cancelBubble= true;
  }
  else
    if(e)
    {
      e.stopPropagation();
    }
}

Se debe de llamar a esta función en el evento 'onclick' de los elementos que no se desea que activen la funcion declarada para BODY, por ejemplo los enlaces. En caso de que estos elementos tengan una función ya asociada al evento 'onclick' se debera llamar a detenerBurbujeo() al final del código de esta función. Dejo un simple ejemplo de su uso.

Código Javascript:

Ver original<script language="javascript">
 
function verBody()
{
  alert("clic sobre el body");
}
 
function verBoton(e)
{
  alert("clic sobre el botón");
  detenerBurbujeo(e);
}
 
function verDiv(e, mensaje)
{
  alert("el mensaje es: "+mensaje);
  detenerBurbujeo(e);
}
 
function detenerBurbujeo(e)
{
  if(window.event)
  {
    window.event.cancelBubble= true;
  }
  else
    if(e)
    {
      e.stopPropagation();
    }
}  
 
</script>
 
<body onclick="verBody()">
<input type="button" value="primer botón" onclick="verBoton(event)">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div style="width:350px; height:50px; background-color:#ffcc33;" onclick="verDiv(event,'mensaje de prueba')">
En este div se cancela en burbujeo.
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a href="http://www.google.com" onclick="detenerBurbujeo(event)">google</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div style="width:350px; height:50px; background-color:#ffcc33;">
En este div no se cancela el burbujeo.
</div>
</body>

Es de vital importancia no olvidar pasar el objeto 'event' como parámetro para la función 'detenerBurbujeo()' ya que es necesario para navegadores diferentes a IE.