llamar - que se puede hacer con javascript
¿Cuál es la diferencia entre los diferentes métodos de poner código JavaScript en un<a>? (7)
He visto los siguientes métodos para poner código JavaScript en una etiqueta <a> :
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 tratar de poner una URL válida en lugar de solo código JavaScript, solo en caso de que el usuario no tenga habilitado JavaScript. Pero para el propósito de esta discusión, necesito suponer que JavaScript está habilitado (no pueden iniciar sesión sin él).
Personalmente, me gusta la opción 2, ya que le permite ver lo que se ejecutará, especialmente útil cuando se depuran los parámetros que se pasan 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 vínculo real para seguir, pero en realidad, # no es "real". No irá absolutamente a ningún lado.
¿Hay alguno que no es compatible o es realmente malo, cuando sabes que el usuario tiene habilitado JavaScript?
Pregunta relacionada: Href para los enlaces de JavaScript: "#" o "javascript: void (0)"? .
Navegadores modernos solamente
<!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://.com/a/14461672/175071 -->
<button class="click-me">Button 1</button>
<input class="click-me" type="button" value="Button 2">
</body>
</html>
Cross-browser
<!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://.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:
¿Por qué harías esto cuando puedes usar addEventListener / attachEvent ? Si no hay href -equivalente, no use un <a> , use un <button> y ajústelo según corresponda.
Disfruto bastante el artículo de Best Practices de Matt Kruse . En él, afirma que usar la sección href para ejecutar código JavaScript es una mala idea. Aunque haya declarado que sus usuarios deben tener JavaScript activado, 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 su sección href en caso de que alguien desactive JavaScript después de iniciar sesión. . Lo recomendaría encarecidamente que todavía permita este mecanismo alternativo. Algo así se apegará a las "mejores prácticas" y logrará su objetivo:
<a href="javascript_required.html" onclick="doSomething(); return false;">go</a>
El método n. ° 2 tiene un error de sintaxis en FF3 e IE7. Prefiero los métodos n. ° 1 y n. ° 3, porque n. ° 4 ensucia el URI con ''n. ° aunque causa menos tipeo ... Obviamente, como lo señalan otras respuestas, la mejor solución es html separado del manejo de eventos.
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 semánticamente la mejor, pero solo diré que prefiero este estilo porque separa tu contenido de tu código JavaScript. Mantiene todos los códigos JavaScript juntos, lo que es mucho más fácil de mantener (especialmente si está aplicando esto a muchos enlaces), e incluso puede colocarlo en un archivo externo que luego se puede empaquetar para reducir el tamaño del archivo y almacenarlo en caché.
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, act2 se ejecutará antes que act1 y en el segundo ejemplo, será al revés.
<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 mejor porque luego consolida su código de evento.