jQuery DIV clic, con anclajes

Question

Haciendo click-poder divs, que hago:

<div class="clickable" url="http://google.com"> 
    blah blah 
</div> 

y luego

$("div.clickable").click(
function() 
{ 
    window.location = $(this).attr("url"); 
}); 

No sé si esta es la mejor manera, pero funciona perfectamente conmigo, excepto por un problema: Si el div contiene un elemento que puede hacer clic, como < a href = "..." >, y el usuario hace clic en el hipervínculo, tanto el hipervínculo como el elemento de clic div son llamado

Esto es especialmente un problema cuando la etiqueta de anclaje se refiere a una función javascript AJAX, que ejecuta la función AJAX Y sigue el enlace en el atributo 'url' del div.

De todos modos, ¿esto?

Answer 1

Si devuelve "falso" de su función, detendrá el burbujeo del evento, por lo que solo su primer controlador de eventos se activará (es decir, su ancla no verá el clic).

$("div.clickable").click(
function() 
{ 
    window.location = $(this).attr("url"); 
    return false; 
}); 

Ver event.preventDefault() vs. return false para los detalles en la declaración falsa contra preventDefault.

Answer 2

$("div.clickable").click( function(event) { window.location = $(this).attr("url"); event.preventDefault(); });

Answer 3

Sé que si tuviera que cambiar eso a un href que haría:

 
$("a#link1").click(function(event) { 
    event.preventDefault(); 
    $('div.link1').show(); 
    //whatever else you want to do 
}); 

por lo que si desea mantener con el div, que iba a tratar

 
$("div.clickable").click(function(event) { 
    event.preventDefault(); 
    window.location = $(this).attr("url"); 
}); 

Answer 4

El uso de un atributo url personalizado hace que el HTML no sea válido. Aunque eso puede no ser un gran problema, los ejemplos dados no son accesibles. No para la navegación por el teclado y no en los casos en que JavaScript está desactivado (o bloqueado por algún otro script). Incluso Google no encontrará la página ubicada en la URL especificada, al menos no a través de esta ruta.

Sin embargo, es bastante fácil hacerlo accesible. Solo asegúrate de que haya un enlace regular dentro del div que apunte a la url. Al utilizar JavaScript/jQuery, agrega un onclick al div que redirecciona a la ubicación especificada por el atributo href del enlace. Ahora, cuando JavaScript no funciona, el enlace aún funciona e incluso puede captar el foco cuando se usa el teclado para navegar (y no necesita atributos personalizados, por lo que su HTML puede ser válido).

---

Escribí un plugin jQuery hace un tiempo que hace esto. También agrega classNames al div (o cualquier otro elemento que desee hacer clic) y el enlace para que pueda modificar su apariencia con CSS cuando se puede hacer clic en el div. Incluso agrega classNames que puede usar para especificar los estilos de desplazamiento y enfoque.

Todo lo que necesita hacer es especificar el elemento (s) que desea hacer se puede hacer clic y llamar a su método de hacer clic(): en su caso sería $("div.clickable).clickable();

Para la descarga de la documentación + consulte la página del plugin: jQuery: clickable — jLix