Eu vi os seguintes métodos de colocar o código JavaScript em uma <a>tag:
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>
Eu entendo a ideia de tentar colocar um URL válido em vez de apenas código JavaScript, apenas no caso de o usuário não ter o JavaScript habilitado. Mas para o propósito desta discussão, preciso assumir que o JavaScript está habilitado (eles não podem fazer o login sem ele).
Pessoalmente, gosto da opção 2, pois ela permite que você veja o que será executado - especialmente útil ao depurar onde há parâmetros sendo passados para a função. Tenho usado bastante e não encontrei problemas com o navegador.
Eu li que as pessoas recomendam 4, porque dá ao usuário um link real para seguir, mas realmente # não é "real". Não irá a lugar nenhum.
Há algum que não seja compatível ou seja muito ruim, quando você sabe que o usuário está com o JavaScript habilitado?
Pergunta relacionada: Href para links JavaScript: “#” ou “javascript: void (0)”? .
fonte
Respostas:
Eu gosto bastante do artigo de práticas recomendadas de Javascript de Matt Kruse . Nele, ele afirma que usar a
hrefseção para executar o código JavaScript é uma má ideia. Mesmo que você tenha declarado que seus usuários devem ter o JavaScript habilitado, não há razão para que você não possa ter uma página HTML simples para a qual todos os seus links JavaScript possam apontar para suahrefseção, caso alguém desligue o JavaScript após o login. Eu recomendo fortemente que você ainda permita esse mecanismo de reserva. Algo como isso seguirá as "práticas recomendadas" e atingirá sua meta:<a href="javascript_required.html" onclick="doSomething(); return false;">go</a>fonte
Por que você faria isso quando pode usar
addEventListener/attachEvent? Se não houver umhref-equivalente, não use um<a>, use um<button>e estilize-o de acordo.fonte
Você esqueceu outro método:
5: <a href="#" id="myLink">Link</a>Com o código JavaScript:
document.getElementById('myLink').onclick = function() { // Do stuff. };Não posso comentar qual das opções tem o melhor suporte ou qual é semanticamente a melhor, mas direi apenas que prefiro muito mais esse estilo porque separa o seu conteúdo do seu código JavaScript. Ele mantém todo o código JavaScript junto, o que é muito mais fácil de manter (especialmente se você estiver aplicando isso a muitos links), e você pode até colocá-lo em um arquivo externo que pode ser compactado para reduzir o tamanho do arquivo e armazenado em cache pelos navegadores clientes.
fonte
<a href="#" onClick="DoSomething(); return false;">link</a>Eu farei isso, ou:
<a href="#" id = "Link">link</a> (document.getElementById("Link")).onclick = function() { DoSomething(); return false; };Dependendo da situação. Para aplicativos maiores, o segundo é melhor porque consolida seu código de evento.
fonte
O método 2 tem um erro de sintaxe no FF3 e no IE7. Eu prefiro os métodos # 1 e # 3, porque # 4 suja o URI com '#' embora cause menos digitação ... Obviamente, como observado por outras respostas, a melhor solução é separar o html do tratamento de eventos.
fonte
return false. Por esse motivo, o método nº 4 é provavelmente o melhor (dos listados).Uma diferença que notei entre isso:
<a class="actor" href="javascript:act1()">Click me</a>e isto:
<a class="actor" onclick="act1();">Click me</a>é que se em qualquer caso você tiver:
<script>$('.actor').click(act2);</script>então, para o primeiro exemplo,
act2será executado antesact1e no segundo exemplo, será o contrário.fonte
Apenas 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>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://stackoverflow.com/a/14461672/175071 --> <button class="click-me">Button 1</button> <input class="click-me" type="button" value="Button 2"> </body> </html>Você pode executar isso antes que o documento esteja pronto, clicar nos botões funcionará porque anexamos o evento ao documento.
Fontes:
fonte