A tag HTML <a> deseja adicionar o href e o onclick trabalhando

123

Eu gostaria de perguntar sobre a tag HTML 

<a href="www.mysite.com" onClick="javascript.function();">Item</a>

Como tornar isso uma tag funcionando com href e onClick ? (prefira o onClick executando primeiro e depois o href)

javascript html tags onclick href
fonte

Respostas:

231

Você já tem o que precisa, com uma pequena alteração na sintaxe:

<a href="www.mysite.com" onclick="return theFunction();">Item</a>

<script type="text/javascript">
    function theFunction () {
        // return true or false, depending on whether you want to allow the `href` property to follow through or not
    }
</script>

O comportamento padrão das <a>tags onclicke hrefpropriedades é executar onclickoe seguir o hreftempo onclickque não retornar false, cancelando o evento (ou o evento não foi impedido)

Ian
fonte
Existe também uma maneira de fazer isso com uma função element.addEventListener?
TheEquah
4
Não funciona para mim, até eu colocar href="#"lá em vez de uma URL real.
yegor256
Eu estou usando o laravel framework, então, no meu blade, eu incluí isso, ele não está funcionando, alguém já tentou isso com o laravel?
Vajira Prabuddhaka
Esta solução não está funcionando se eu tiver algum método de ação chamado no controlador mvc no href. Alguém por favor pode ajudar?
DharaPPatel
10

Use jQuery . Você precisa capturar o clickevento e depois acessar o site.

$("#myHref").on('click', function() {
  alert("inside onclick");
  window.location = "http://www.google.com";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="myHref">Click me</a>
Expandir snippet

Sudipta Chatterjee
fonte
11
não usarei nenhuma estrutura javascript. mas obrigado pela sua resposta
7
Acima não é um link real. Ele não pode ser aberto em uma nova guia e é uma prática muito ruim. Se algo puder ser aberto em uma nova guia (possui um URL), adicione sempre um hrefatributo significativo .
Nux
2

Para conseguir isso, use o seguinte html:

<a href="www.mysite.com" onclick="make(event)">Item</a>

<script>
    function make(e) {
        // ...  your function code
        // e.preventDefault();   // use this to NOT go to href site
    }
</script>

Aqui está um exemplo de trabalho .

Kamil Kiełczewski
fonte
Isso funciona para mim no Chrome, no entanto, o Safari parece executar a função, mas não abre o href ... alguma sugestão?
Ben
@ Ben fiz teste no violino sem JS - apenas html puro: <a href="http://example.com" >Item</a>e no Chrome, vejo uma mensagem para permitir que a página execute este link (alerta no final da barra de URL do Chrome). No safari no console, vejo o seguinte: [bloqueado] A página fiddle.jshell.net/_display não tinha permissão para exibir conteúdo não seguro de example.com - portanto, provavelmente esse é um problema de segurança (apenas no violino?)
Kamil Kiełczewski
1

Não é necessário jQuery.

Algumas pessoas dizem que usar onclické uma má prática ...

Este exemplo usa javascript puro do navegador. Por padrão, parece que o manipulador de cliques será avaliado antes da navegação, para que você possa cancelar a navegação e fazer a sua própria, se desejar.

<a id="myButton" href="http://google.com">Click me!</a>
<script>
    window.addEventListener("load", () => {
        document.querySelector("#myButton").addEventListener("click", e => {
            alert("Clicked!");
            // Can also cancel the event and manually navigate
            // e.preventDefault();
            // window.location = e.target.href;
        });
    });
</script>
TeamDman
fonte
-1

Use ng-clickno lugar de onclick. e é tão simples quanto isso:

<a href="www.mysite.com" ng-click="return theFunction();">Item</a>

<script type="text/javascript">
function theFunction () {
    // return true or false, depending on whether you want to allow 
    // the`href` property to follow through or not
 }
</script>
mak-273
fonte
Only in AngularJS
Corrodian