¿Cuál es la mejor manera de reemplazar enlaces con funciones JS?

Question

Un patrón que ha empezado a aparecer mucho en una de las aplicaciones web en las que estoy trabajando son los enlaces que solían ser un enlace de etiqueta normal ahora necesitan una ventana emergente que pregunte "¿estás seguro?" antes de que el enlace vaya (Si el usuario acierta cancela, no pasa nada.)

Tenemos una solución que funciona, pero de alguna manera somos una tienda de aplicaciones web sin un experto en Javascript, por lo que me queda la sensación de que hay un mejor forma de hacer el trabajo.

Por lo tanto, expertos en JS, ¿cuál es la forma más compatible con los estándares y entre navegadores para hacer esto?

(Para el registro, esto ya es un sitio que requiere JS, por lo que no hay necesidad de tener una versión "no-JS". Sin embargo, lo necesita para trabajar en cualquier y todos los navegadores razonablemente modernas.)

(también, para los puntos de bonificación que sería bueno si las personas con JS desactivado no tenía el trabajo enlaces, en lugar de pasar por la caja de confirmación.)

Answer 1

discreto Javascript

Lo más recomendable es añadir métodos de controlador de eventos a los enlaces.

La función confirmar() produce el cuadro de diálogo que describió y devuelve verdadero o falso según la elección del usuario.

Los métodos de controlador de eventos en los enlaces tienen un comportamiento especial, que es que matan la acción de enlace si devuelven falso.

var link = document.getElementById('confirmToFollow'); 

link.onclick = function() { 
    return confirm("Are you sure?"); 
}; 

Si desea que el enlace a necesitan Javascript, el código HTML debe ser editado. Retire el href:

<a href="#" id="confirmToFollow"... 

Puede establecer explícitamente el destino del enlace en el controlador de eventos:

var link = document.getElementById('confirmToFollow'); 

link.onclick = function() { 
    if(confirm("Are you sure?")) { 
     window.location = "http://www.stackoverflow.com/"; 
    } 
    return false; 
}; 

Si desea que el mismo método llamado en múltiples enlaces, puede adquirir una lista de nodos de los enlaces que desee, y aplicar el método a cada uno como se recorre a través de la lista de nodos:

var allLinks = document.getElementsByTagName('a'); 
for (var i=0; i < allLinks.length; i++) { 
    allLinks[i].onclick = function() { 
     return confirm("Are you sure?"); 
    }; 
} 

Hay otras permutaciones de la misma idea aquí, tales como el uso de un nombre de clase para determinar qué enlaces escuchará el método y pasará una ubicación única en cada uno según otros criterios. Son seis de una, media docena de otra.

Enfoques alternativos (no prácticas alentado):

Una práctica desalentado es adjuntar un método a través de un onclick atributo:

<a href="mypage.html" onclick="... 

Otra práctica desalentado es establecer el atributo href a una llamada de función:

<a href="javascript: confirmLink() ... 

Tenga en cuenta que estas prácticas desanimadas son todas soluciones de trabajo.

Answer 2

Así es como hemos estado haciendo:

<a href="#" onClick="goThere(); return false;">Go to new page</a>` 

function goThere() 
{ 
    if(confirm("Are you sure?")) 
    { 
     window.location.href="newPage.aspx"; 
    } 
} 

(EDIT: Código reformateado para evitar desplazamiento horizontal)

Answer 3

<a href="http://..." onclick="return confirm('are you sure?')">text</a> 

Answer 4

Una versión de unión de clase (sin necesidad de línea onclick atributos): vincular esta < script externo> después de que todos los controles confirmable:

// dangerous - warnings on potentially harmful actions 
// usage: add class="dangerous" to <a>, <input> or <button> 
// Optionally add custom confirmation message to title attribute 

function dangerous_bind() { 
    var lists= [ 
     document.getElementsByTagName('input'), 
     document.getElementsByTagName('button'), 
     document.getElementsByTagName('a') 
    ]; 
    for (var listi= lists.length; listi-->0;) { var els= lists[listi]; 
     for (var eli= els.length; eli-->0;) { var el= els[eli]; 
      if (array_contains(el.className.split(' '), 'dangerous')) 
       el.onclick= dangerous_click; 
     } 
    } 
} 

function array_contains(a, x) { 
    for (var i= a.length; i-->0;) 
     if (a[i]==x) return true; 
    return false; 
} 

function dangerous_click() { 
    return confirm(this.title || 'Are you sure?'); 
} 

dangerous_bind(); 

Esto es un poco largo aliento debido al trabajo de unión en submits/botones también. En general, aunque tiene sentido tener opciones "peligrosas", deberás confirmar los botones en lugar de los enlaces. Las solicitudes GET disparadas por enlaces en realidad no deberían tener ningún efecto activo.

Answer 5

En jQuery es algo así como:

$("a").click(function() {if(confirm('yadda yadda')) event.stopPropagation();}); 

Si entiendo lo que jgreep mencionó, si sólo se desea la confirmación de aparecer en algunos enlaces, que se uniría el controlador de clic únicamente a los enlaces con la derecha clase. Puede hacer esto solo para anclajes o para cualquier elemento html que tenga la clase.

$(".conf").click(function() {if(confirm('yadda yadda')) event.stopPropagation();}); 

Answer 6

var links = document.getElementsByTagName('A'); 

for (var i = 0; i < links.length; i++) 
{ 
    links[i].onclick = function() 
    {  
     return Confirm("Are you sure?"); 
    } 
} 

Esto se aplica el mensaje a todos los enlaces, sin embargo es un poco más difícil de hacer que los enlaces no funcionan sin javascript automáticamente (en realidad es imposible).

Answer 7

Si está utilizando jQuery puede hacer:

jQuery(document).ready(
    jQuery("a").click(){ 
     //you'd place here your extra logic 
     document.location.href = this.href; 
    } 
); 

Answer 8

Tome un vistazo a What’s the best way to open new browser window. Puede hacer algo similar, pero arroje la confirmación antes de abrir una nueva ventana.