Acesse o evento para chamar preventdefault da função personalizada originada do atributo onclick da tag

119

Tenho links como este:

<a href="#" onclick="myfunc({a:1, b:'hi'})" />click</a>
<a href="#" onclick="myfunc({a:3, b:'jo'})" />click</a>

E eu gostaria de fazer um por preventDefault()dentro myfunc(), porque um #será adicionado na barra de endereço ao clicar no link (sem fazer return false;ou href='javascript:void(0);')

Isso é possível? Posso colocar o evento lá dentromyfunc()

Omu
fonte
6
O que há de errado em return false?
Alex
5
ele para a propagação também
Omu
4
return falseapenas pára a propagação dentro do jQuery.
cruzanmo

Respostas:

157

Eu acredito que você pode passar eventpara a função inline que será o eventobjeto para o evento gerado em navegadores compatíveis com W3C (ou seja, versões mais antigas do IE ainda exigirão detecção dentro de sua função de manipulador de eventos para olhar window.event).

Um exemplo rápido .

function sayHi(e) {
   e.preventDefault();
   alert("hi");
}
<a href="http://google.co.uk" onclick="sayHi(event);">Click to say Hi</a>

  1. Execute-o como está e observe que o link não redireciona para o Google após o alerta.
  2. Em seguida, mude o eventpassado para o onclickmanipulador para algo como e, clique em executar e observe que o redirecionamento ocorre após o alerta (o painel de resultados fica branco, demonstrando um redirecionamento).
Russ Cam
fonte
5
ok, vejo que tudo que tive que fazer foi colocar meu parâmetro em segundomyfunc(event, {a:123, b:"asdas"})
Omu
1
@Omu O argumento passado, evento, pode estar em qualquer lugar, não precisa ser o primeiro, desde que esteja no lugar certo da lista de parâmetros definida para a função. Por exemplo, function myfunc(o, e) {...}ele pode ser chamado de myfunc({a:1, b:'hi'}, event).
cateyes
2
Acho que você não precisa passar e capturar explicitamente o objeto de evento. Você pode simplesmente referir-se a ele na função. Alguém pode confirmar? Quer dizer, este código sem o evento também deve funcionar:function sayHi() { event.preventDefault(); alert("hi"); }
K Vij
111

A solução mais simples é simplesmente:

<a href="#" onclick="event.preventDefault(); myfunc({a:1, b:'hi'});" />click</a>

Na verdade, é uma boa maneira de invalidar o cache para documentos com um substituto para navegadores não habilitados para JS (sem invalidação de cache se não houver JS)

<a onclick="
if(event.preventDefault) event.preventDefault(); else event.returnValue = false;
window.location = 'http://www.domain.com/docs/thingy.pdf?cachebuster=' + 
Math.round(new Date().getTime() / 1000);" 
href="http://www.domain.com/docs/thingy.pdf">

Se o JavaScript estiver habilitado, ele abre o PDF com uma string de consulta que impede o cache, caso contrário, apenas abre o PDF.

JuLo
fonte
Poderia apenas usar a tecnologia do lado do servidor para reescrever esse link se o bloqueio de cache é tudo o que você procura.
mpen
Seria melhor, mas não tenho acesso ao código do lado do servidor. Trabalhando com o que tenho.
junho
11

Experimente isto:

<script>
    $("a").click(function(event) {
        event.preventDefault(); 
    });
</script>
Suave Nti
fonte
isso requer uma tag <script> para cada evento de clique, tornando o código mais complicado.
somid
Também requer jQuery, que embora possa estar presente não deve ser um pré-requisito.
Galpão Irregular de
Também discordo aqui, uma análise simples para uma função embutida é mais eficaz e menos código.
Shannon Hochkins
1
@ somid3, enquanto jQuery não é necessário , se você está preocupado com o desempenho, você pode usar um único manipulador de eventos delegado de modo que você está anexando apenas um único ouvinte para todas as âncoras na página como esta: $("body").on("click","a",function(e) { e.preventDefault() });. Em qualquer dos casos, nenhuma das soluções afetará significativamente o desempenho.
KyleMit
7
<script type="text/javascript">
$('a').click(function(){
   return false;
});
<script>
Aram Mkrtchyan
fonte
2
Isso se aplica a todas as âncoras e quebrará todos os links, também requer a inserção de javascript na página, bem como jQuery.
Shannon Hochkins
Além disso, ao usar jQuery, return falsenão é recomendado, pois também impedirá que todos os outros manipuladores de eventos naquele elemento sejam executados e parará o evento de borbulhar para elementos superiores.
Stijn de Witt
6

Adicione uma classe exclusiva aos links e um javascript que evita o padrão em links com esta classe:

<a href="#" class="prevent-default" 
   onclick="$('.comment .hidden').toggle();">Show comments</a>

<script>
  $(document).ready(function(){

    $("a.prevent-default").click(function(event) {
         event.preventDefault(); 
          });
  });
</script>
aaandre
fonte
Abordagem interessante para uma solução global.
AFract
5

Você não pode simplesmente remover o atributo href da tag a?

Leigh Ciechanowski
fonte
1
sim, essa também é uma opção, embora por padrão o link não tenha sublinhado e se o javascript estiver desligado, não haverá href para acessar
Omu
4

Acho que quando usamos onClick queremos fazer algo diferente do padrão. Portanto, para todos os seus links com onClick:

$("a[onClick]").on("click", function(e) {
  return e.preventDefault();
});
Ronan
fonte
2

Simples!

onclick="blabla(); return false"
Jake
fonte
2

Você pode acessar o evento onclick assim:

<button onclick="yourFunc(event);">go</button>

e em sua função javascript, meu conselho é adicionar a instrução de primeira linha como:

function yourFunc(e) {
    e = e ? e : event;
}

então use em todos os lugares e como variável de evento

gdarcan
fonte
0

e.preventDefault (); de https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault

Ou tenha o retorno falso do seu método.

Rahul Singh Chauhan
fonte
1
Como sua resposta difere das respostas que já foram fornecidas?
Dimitar Spasovski
Recebi um URL para mais clareza sobre a pergunta feita
rahul singh Chauhan
0

Sem qualquer biblioteca JS ou jQuery. Para abrir uma bela janela pop-up, se possível. Falha com segurança ao abrir o link normal.

<a href="https://acme.com/" onclick="onclick="openNewWindow(event, this.href);">...</a>

E a função auxiliar:

function openNewWindow(event, location) {
  if (event.preventDefault && event.stopImmediatePropagation) { 
    event.preventDefault(); 
    event.stopImmediatePropagation(); 
  } else {
    event.returnValue = false; 
  }
  window.open(location, 'targetWindow', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=800,height=450');
}
Martin Večeřa
fonte