Respuestas:
<a onclick="jsfunction()" href="#">o
<a onclick="jsfunction()" href="javascript:void(0);">Editar:
La respuesta anterior no es realmente una buena solución, ya que aprendí mucho sobre JS desde que publiqué inicialmente. Consulte la respuesta de EndangeredMassa a continuación para conocer el mejor enfoque para resolver este problema.
JavaScript discreto, sin dependencia de la biblioteca:
<html>
<head>
<script type="text/javascript">
// Wait for the page to load first
window.onload = function() {
//Get a reference to the link on the page
// with an id of "mylink"
var a = document.getElementById("mylink");
//Set code to run when the link is clicked
// by assigning a function to "onclick"
a.onclick = function() {
// Your code here...
//If you don't want the link to actually
// redirect the browser to another page,
// "google.com" in our example here, then
// return false at the end of this block.
// Note that this also prevents event bubbling,
// which is probably what we want here, but won't
// always be the case.
return false;
}
}
</script>
</head>
<body>
<a id="mylink" href="http://www.google.com">linky</a>
</body>
</html>hrefsi no quiero redirigir al usuario y solo quiero ejecutar algún código? Editar: Veo que puede estar en blanco a la izquierda: href="".
onclickevento a través de window.onload, en lugar de ponerlo onclickdirectamente en la <a>etiqueta?
<a href="javascript:alert('Hello!');">Clicky</a>EDITAR, años después: ¡NO! ¡Nunca hagas esto! ¡Era joven y estúpido!
Editar, nuevamente: un par de personas han preguntado por qué no deberías hacer esto. Hay un par de razones:
Presentación: HTML debe centrarse en la presentación. Poner JS en un HREF significa que su HTML ahora, más o menos, se trata de lógica empresarial.
Seguridad: Javascript en su HTML como eso viola la Política de Seguridad de Contenido (CSP) . La Política de seguridad de contenido (CSP) es una capa adicional de seguridad que ayuda a detectar y mitigar ciertos tipos de ataques, incluidos los Cross-Site Scripting (XSS) y los ataques de inyección de datos. Estos ataques se utilizan para todo, desde robo de datos hasta desfiguración del sitio o distribución de malware. Lee más aquí .
Accesibilidad: las etiquetas de anclaje son para vincular a otros documentos / páginas / recursos. Si su enlace no va a ninguna parte, debería ser un botón . Esto hace que sea mucho más fácil para los lectores de pantalla, terminales braille, etc. determinar lo que está sucediendo y brindar a los usuarios con discapacidad visual información útil.
href='#'y alert()en onclick?
Y, ¿por qué no discreto con jQuery:
$(function() {
$("#unobtrusive").click(function(e) {
e.preventDefault(); // if desired...
// other methods to call...
});
});HTML
<a id="unobtrusive" href="http://jquery.com">jquery</a>El JavaScript discreto tiene muchas ventajas, estos son los pasos que sigue y por qué es bueno usarlo.
el enlace se carga normalmente:
<a id="DaLink" href="http://host/toAnewPage.html"> haga clic aquí </a>
Esto es importante porque funcionará para los navegadores con JavaScript no habilitado, o si hay un error en el código de JavaScript que no funciona.
JavaScript se ejecuta en la carga de la página:
window.onload = function(){
document.getElementById("DaLink").onclick = function(){
if(funcitonToCall()){
// most important step in this whole process
return false;
}
}
}si el javascript se ejecuta con éxito, tal vez cargando el contenido en la página actual con javascript, la devolución falsa cancela la activación del enlace. en otras palabras, poner return false tiene el efecto de deshabilitar el enlace si javascript se ejecutó correctamente. Si bien permite que se ejecute si JavaScript no lo hace, realiza una buena copia de seguridad para que su contenido se muestre de cualquier manera, para los motores de búsqueda y si su código se rompe, o se ve en un sistema que no sea JavaScript.
el mejor libro sobre el tema es "Dom Scription" de Jeremy Keith
O, si estás usando PrototypeJS
<script type="text/javascript>
Event.observe( $('thelink'), 'click', function(event) {
//do stuff
Event.stop(event);
}
</script>
<a href="#" id="thelink">This is the link</a>basado en el uso de respuesta @mister_lucky con jquery:
$('#unobtrusive').on('click',function (e) {
e.preventDefault(); //optional
//some code
});Código HTML:
<a id="unobtrusive" href="http://jquery.com">jquery</a>solo use javascript: ---- ejemplar
javascript:var JFL_81371678974472 = new JotformFeedback({ formId: '81371678974472', base: 'https://form.jotform.me/', windowTitle: 'Photobook Series', background: '#e44c2a', fontColor: '#FFFFFF', type: 'false', height: 700, width: 500, openOnLoad: true })