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

llamar archivo javascript desde html

Question

Un patrón que comenzó 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 una forma mejor de hacer el trabajo.

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

(Para el registro, este ya es un sitio que requiere JS, por lo que no es necesario tener una versión "no JS". Sin embargo, debe funcionar en todos los navegadores razonablemente modernos).

(Además, para los puntos de bonificación, sería bueno si las personas con JS desactivadas no tuvieran los enlaces funcionando, en lugar de ignorar el cuadro de confirmación).

Answer 1

Así es como lo 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";
}
}

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

Answer 2

En jquery es algo así como:

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

Si entiendo lo que jgreep mencionó, si solo desea que la confirmación aparezca en algunos enlaces, vinculará el manejador de clics solo a enlaces con la clase correcta. 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 3

Si está utilizando jQuery, haría:

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

Answer 4

Una versión de enlace de clase (sin necesidad de atributos onclick en línea): enlace este <script> externo después de todos los controles confirmables:

// 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 debido a la vinculación que trabaja en submits / buttons 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

Javascript discreto

La mejor práctica es agregar métodos de controlador de eventos a los enlaces.

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

Los métodos del manejador 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 requiera javascript , el HTML debe ser editado. Eliminar 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..com/";
}
return false;
};

Si desea que se invoque el mismo método en varios enlaces, puede adquirir una lista de nodos de los enlaces que desee, y aplicar el método a cada uno mientras recorre nodeList:

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

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

Enfoques alternativos (prácticas no recomendadas):

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

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

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

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

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

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 aplica el mensaje a todos los enlaces, sin embargo, es un poco más difícil hacer que los enlaces no funcionen sin javascript automáticamente (en realidad es imposible).

Answer 7

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

Answer 8

Echa un vistazo a ¿Cuál es la mejor manera de abrir una nueva ventana del navegador ? Puede hacer algo similar, pero arroje la confirmación antes de abrir una nueva ventana.