He visto los siguientes métodos para poner código JavaScript en una <a>etiqueta:
function DoSomething() { ... return false; }
<a href="javascript:;" onClick="return DoSomething();">link</a><a href="javascript:DoSomething();">link</a><a href="javascript:void(0);" onClick="return DoSomething();">link</a><a href="#" onClick="return DoSomething();">link</a>
Entiendo la idea de intentar poner una URL válida en lugar de solo código JavaScript, en caso de que el usuario no tenga JavaScript habilitado. Pero para el propósito de esta discusión, debo asumir que JavaScript está habilitado (no pueden iniciar sesión sin él).
Personalmente, me gusta la opción 2 ya que le permite ver qué se va a ejecutar, especialmente útil cuando se depura dónde se pasan parámetros a la función. Lo he usado bastante y no he encontrado problemas con el navegador.
He leído que la gente recomienda 4, porque le da al usuario un enlace real a seguir, pero en realidad, # no es "real". Irá absolutamente a ninguna parte.
¿Hay alguno que no sea compatible o sea realmente malo, cuando sabe que el usuario tiene habilitado JavaScript?
Pregunta relacionada: Href para enlaces JavaScript: "#" o "javascript: void (0)"? .
fuente
Respuestas:
Disfruto bastante del artículo de Matt Kruse sobre las mejores prácticas de JavaScript . En él, afirma que usar la
hrefsección para ejecutar código JavaScript es una mala idea. A pesar de que ha indicado que sus usuarios deben tener JavaScript habilitado, no hay ninguna razón por la que no pueda tener una página HTML simple a la que todos sus enlaces de JavaScript puedan apuntar para suhrefsección en caso de que alguien apague JavaScript después de iniciar sesión. Le recomiendo encarecidamente que siga permitiendo este mecanismo de reserva. Algo como esto se adherirá a las "mejores prácticas" y logrará su objetivo:<a href="javascript_required.html" onclick="doSomething(); return false;">go</a>fuente
¿Por qué harías esto cuando puedes usar
addEventListener/attachEvent? Si no hayhref-equivalente, no use un<a>, use un<button>y ajústelo en consecuencia.fuente
Olvidaste otro método:
5: <a href="#" id="myLink">Link</a>Con el código JavaScript:
document.getElementById('myLink').onclick = function() { // Do stuff. };No puedo comentar cuál de las opciones tiene el mejor soporte o cuál es la mejor semánticamente, pero solo diré que prefiero este estilo porque separa tu contenido de tu código JavaScript. Mantiene todo el código JavaScript junto, que es mucho más fácil de mantener (especialmente si está aplicando esto a muchos enlaces), e incluso puede ponerlo en un archivo externo que luego se puede empaquetar para reducir y almacenar en caché por los navegadores del cliente.
fuente
<a href="#" onClick="DoSomething(); return false;">link</a>Haré esto, o:
<a href="#" id = "Link">link</a> (document.getElementById("Link")).onclick = function() { DoSomething(); return false; };Dependiendo de la situación. Para aplicaciones más grandes, la segunda es la mejor porque luego consolida su código de evento.
fuente
El método # 2 tiene un error de sintaxis en FF3 e IE7. Prefiero los métodos n. ° 1 y n. ° 3, porque el n. ° 4 ensucia el URI con '#' aunque causa menos escritura ... Obviamente, como se indica en otras respuestas, la mejor solución es separar html del manejo de eventos.
fuente
return false. Por esa razón, el método # 4 es probablemente el mejor (de los enumerados).Una diferencia que he notado entre esto:
<a class="actor" href="javascript:act1()">Click me</a>y esto:
<a class="actor" onclick="act1();">Click me</a>es que si en cualquier caso tienes:
<script>$('.actor').click(act2);</script>luego, para el primer ejemplo,
act2se ejecutará antesact1y en el segundo ejemplo, será al revés.fuente
Solo navegadores modernos
<!DOCTYPE html> <html> <head> <script type="text/javascript"> (function(doc){ var hasClass = function(el,className) { return (' ' + el.className + ' ').indexOf(' ' + className + ' ') > -1; } doc.addEventListener('click', function(e){ if(hasClass(e.target, 'click-me')){ e.preventDefault(); doSomething.call(e.target, e); } }); })(document); function doSomething(event){ console.log(this); // this will be the clicked element } </script> <!--... other head stuff ...--> </head> <body> <!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 --> <button class="click-me">Button 1</button> <input class="click-me" type="button" value="Button 2"> </body> </html>Navegador cruzado
<!DOCTYPE html> <html> <head> <script type="text/javascript"> (function(doc){ var cb_addEventListener = function(obj, evt, fnc) { // W3C model if (obj.addEventListener) { obj.addEventListener(evt, fnc, false); return true; } // Microsoft model else if (obj.attachEvent) { return obj.attachEvent('on' + evt, fnc); } // Browser don't support W3C or MSFT model, go on with traditional else { evt = 'on'+evt; if(typeof obj[evt] === 'function'){ // Object already has a function on traditional // Let's wrap it with our own function inside another function fnc = (function(f1,f2){ return function(){ f1.apply(this,arguments); f2.apply(this,arguments); } })(obj[evt], fnc); } obj[evt] = fnc; return true; } return false; }; var hasClass = function(el,className) { return (' ' + el.className + ' ').indexOf(' ' + className + ' ') > -1; } cb_addEventListener(doc, 'click', function(e){ if(hasClass(e.target, 'click-me')){ e.preventDefault ? e.preventDefault() : e.returnValue = false; doSomething.call(e.target, e); } }); })(document); function doSomething(event){ console.log(this); // this will be the clicked element } </script> <!--... other head stuff ...--> </head> <body> <!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 --> <button class="click-me">Button 1</button> <input class="click-me" type="button" value="Button 2"> </body> </html>Puede ejecutar esto antes de que el documento esté listo, hacer clic en los botones funcionará porque adjuntamos el evento al documento.
Fuentes:
fuente