Como posso desabilitar o HREF se o onclick for executado?


94

Eu tenho uma âncora com os atributos HREFe ONCLICKdefinidos. Se clicado e o Javascript estiver habilitado, quero apenas executar ONCLICKe ignorar HREF. Da mesma forma, se o Javascript estiver desabilitado ou não for compatível, quero que ele siga a HREFURL e ignore ONCLICK. Abaixo está um exemplo do que estou fazendo, que executaria o JS e seguiria o link simultaneamente (geralmente o JS é executado e, em seguida, a página muda):

<A HREF="http://example.com/no-js-login" ONCLICK="yes_js_login()">Log in</A>

Qual é a melhor forma de fazer isso?

Espero uma resposta Javascript, mas aceitarei qualquer método, desde que funcione, especialmente se isso puder ser feito com PHP. Já li " um link href executa e redireciona a página antes que a função onclick do javascript seja capaz de terminar ", mas só atrasa HREF, mas não o desativa completamente. Também estou procurando algo muito mais simples.


4
Eu usaria para ancorar um com href e outro sem. No carregamento da página, verifique se o javascript está habilitado, se mostra a âncora correta, se não mostra a outra
ewein

1
@ewein Por quê? Isso soa como uma grande quantidade de marcação para um recurso simples.
Supuhstar

Respostas:


56

Você pode usar a primeira solução não editada, se colocar return primeiro no onclickatributo:

<a href="https://example.com/no-js-login" onclick="return yes_js_login();">Log in</a>

yes_js_login = function() {
     // Your code here
     return false;
}

Exemplo: https://jsfiddle.net/FXkgV/289/


1
Eu gosto de como isso é limpo! No entanto, a solução aceita me dá mais controle sobre se o HREF é ignorado
Supuhstar

Nos últimos dois anos, mudei de ideia; esta é uma solução melhor
Supuhstar

Quão saudável!
DrunkDevKek

Mas isso não está funcionando com JSX react. Isso vai funcionar?
Coder

1
isso economizou muito tempo.
Mark Lozano

60
    yes_js_login = function() {
         // Your code here
         return false;
    }

Se você retornar false, ele deve impedir a ação padrão (ir para o href).

Editar: parece que não funciona, você pode fazer o seguinte:

<a href="http://example.com/no-js-login" onclick="yes_js_login(); return false;">Link</a>

1
A resposta editada não responde à pergunta, pois remove o link real.
Itai Bar-Haim

11
alternativamente, use onclick="return yes_js_login();"com yes_js_loginretornofalse
Uwe Kleine-König

1
@cgogolin veja minha resposta.
Gabe Rogan

para quem ainda event.stopImmediatePropagation()
travou

33

Simplesmente desabilite o comportamento padrão do navegador usando preventDefaulte passe o eventdentro do seu HTML.

<a href=/foo onclick= yes_js_login(event)>Lorem ipsum</a>

yes_js_login = function(e) {
  e.preventDefault();
}

1
retorno falso não funcionou no polímero ... a solução acima funcionou ... Obrigado
Paras Sachapara

16
<a href="http://www.google.com" class="ignore-click">Test</a>

com jQuery:

<script>
    $(".ignore-click").click(function(){
        return false;
    })
</script>

com JavaScript

<script>
        for (var i = 0; i < document.getElementsByClassName("ignore-click").length; i++) {
            document.getElementsByClassName("ignore-click")[i].addEventListener('click', function (event) {
                event.preventDefault();
                return false;
            });
        }
</script>

Você atribui classe .ignore-clicka quantos elementos desejar e os cliques nesses elementos serão ignorados


Esta é uma otima soluçao! Usei-o para botões que tenho que, quando clicados, uma pseudo classe .btn-loadingé adicionada ao link clicado e, se for bem-sucedido, uma marca de seleção (em caso de erro, um X) substitui a animação de carregamento. Não quero que o botão possa ser clicado novamente em alguns casos (tanto para sucesso quanto para erro), usando isso eu posso de maneira simples $(elemnent).addClass('disabled')e fácil alcançar a funcionalidade que estava procurando de uma forma elegante!
Matthew Mathieson

14

Você pode usar este código simples:

<a href="" onclick="return false;">add new action</a><br>

5

É mais simples se você passar um parâmetro de evento como este:

<a href="#" onclick="yes_js_login(event);">link</a>
function yes_js_login(e) {
    e.stopImmediatePropagation();
}

1
Isso não funciona para mim. Tenho que usar e.preventDefault ()
Milan Simek

2

Isso pode ajudar. Não é necessário JQuery

<a href="../some-relative-link/file" 
onclick="this.href = 'https://docs.google.com/viewer?url='+this.href; this.onclick = '';" 
target="_blank">

Este código faz o seguinte: Passa o link relativo ao Google Docs Viewer

  1. Obtenha a versão completa do link da âncora por this.href
  2. abra o link da nova janela.

Então, no seu caso, isso pode funcionar:

<a href="../some-relative-link/file" 
onclick="this.href = 'javascript:'+console.log('something has stopped the link'); " 
target="_blank">

1

Resolvi uma situação em que precisava de um modelo para o elemento que trataria alternativamente um URL normal ou uma chamada de javascript, em que a função js precisa de uma referência ao elemento de chamada. Em javascript, "this" funciona como uma auto-referência apenas no contexto de um elemento de formulário, por exemplo, um botão. Eu não queria um botão, apenas a aparência de um link normal.

Exemplos:

<a onclick="http://blahblah" href="http://blahblah" target="_blank">A regular link</a>
<a onclick="javascript:myFunc($(this));return false" href="javascript:myFunc($(this));"  target="_blank">javascript with self reference</a>

Os atributos href e onClick têm os mesmos valores, exceto eu acrescento "return false" em onClick quando é uma chamada de javascript. Ter "return false" na função chamada não funcionou.


porque tem dois? Por que você está colocando JS no HREF?
Supuhstar

Supuhstar, o código real é dinâmico, javascript, e irá gerar um elemento <a> para várias centenas de itens que são definidos externamente. Cada item especificará um endereço de link estático e é aí que o elemento <a> gerado deve usar o "comportamento href" regular. Ou, uma chamada de função javascript é especificada para o item, caso em que o comportamento do elemento <a> é calculado, com base no contexto do elemento. E no código para o gerador <a>, eu só queria copiar o que quer que seja especificado para cada elemento, sem testar se é um endereço de link ou uma chamada de função javascript.
Bo Johanson,

Não entendo como isso responde à minha pergunta. Quem disse que eu queria várias centenas de links? Eu realmente não entendo o sentido de tudo isso, ou mesmo metade do que você acabou de dizer.
Supuhstar

0

Isso funcionou para mim:

<a href="" onclick="return false;">Action</a>

Obrigado por sua resposta e bem-vindo ao Stack Exchange! Infelizmente, isso não parece agregar nenhum conhecimento novo, uma vez que as respostas anteriores já sugerem isso. Se você concorda, então é melhor votar a favor. Se você discordar, edite sua resposta para que seus novos conhecimentos venham à tona!
Supuhstar

0

No meu caso, tive uma condição quando o usuário clicou no elemento "a". A condição era:

Se outra seção tiver mais de dez itens, o usuário não deve ser redirecionado para outra página.

Se outra seção tiver menos de dez itens, o usuário deve ser redirecionado para outra página.

A funcionalidade dos elementos "a" depende do outro componente. O código no evento de clique é o seguinte:

var elementsOtherSection = document.querySelectorAll("#vehicle-item").length;
if (elementsOtherSection> 10){
     return true;
}else{
     event.preventDefault();
     return false;
}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.