javascript - link - jQuery DIV clic, con anclajes

trigger click javascript

Question

Para hacer divisiones por clic, hago:

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

y entonces

$("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, se llaman tanto el hipervínculo como el clic de Div.

Esto es especialmente un problema cuando la etiqueta ancla 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 alrededor de esto?

Answer 1

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

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

así que si quieres mantenerlo con el div, intentaré

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

Answer 2

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

Answer 3

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

Hace un tiempo escribí un plugin jQuery 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 los elementos que desea hacer clic y llamar a su método clicable (): en su caso, sería $("div.clickable).clickable();

Para descargar + documentación, consulte la página del complemento: jQuery: clicable - jLix

Answer 4

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

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

Consulte event.preventDefault () vs. return false para obtener detalles sobre return false vs. preventDefault.