preventDefault () em uma tag <a>

133

Eu tenho alguns HTML e jQuery que deslizam um para divcima e para baixo para mostrar ou ocultar quando um link é clicado:

<ul class="product-info">
  <li>
    <a href="#">YOU CLICK THIS TO SHOW/HIDE</a>
    <div class="toggle">
      <p>CONTENT TO SHOW/HIDE</p>
    </div>
  </li>
</ul>

$('div.toggle').hide();
$('ul.product-info li a').click(function(event){
  $(this).next('div').slideToggle(200);
}

Minha pergunta é: como faço preventDefault()para interromper o link como um link e adicionar "#" ao final do meu URL e pular para o topo da página?

Não consigo descobrir a sintaxe correta, continuo recebendo um erro dizendo

preventDefault () não é uma função.

javascript jquery

— Chris J Allen
fonte

194

Tente algo como:

$('div.toggle').hide();
$('ul.product-info li a').click(function(event) {
    event.preventDefault();
    $(this).next('div').slideToggle(200);
});

Aqui está a página sobre isso na documentação do jQuery

— Davide Gualano
fonte

53

Defina o hrefatributo comohref="javascript:;"

<ul class="product-info">
  <li>
   <a href="javascript:;">YOU CLICK THIS TO SHOW/HIDE</a>
  <div class="toggle">
    <p>CONTENT TO SHOW/HIDE</p>
  </div>
 </li>
</ul>

— Musaddiq Khan
fonte

Pequena jóia agradável para âncoras - obrigado! Alguém poderia descrever por que isso funciona?

— Justinpage 24/10

8

O hrefatributo @KLVTZ da tag anchor ( a) pode não estar vazio ... Mas podemos configurá-lo como javascript:<code-here>legal / válido. Em seguida, inserimos <code-here>apenas uma declaração vazia adicionando um ponto e vírgula. Dessa forma, o link não faz nada.

— Stijn de Witt

1

Muito obrigado! Isso me permitiu implementar uma funcionalidade de botão voltar (lembrando o estado definido por pushState () nas páginas) nas trilhas de navegação do CalePHP como $ this-> Html-> addCrumb ('Sessions', 'javascript: window.history.back (); ');

— Patronauta

38

É sugerido que você não use return false, pois três coisas ocorrem como resultado:

event.preventDefault ();
event.stopPropagation ();
Pára a execução de retorno de chamada e retorna imediatamente quando chamado.

Portanto, neste tipo de situação, você realmente deve usar apenas event.preventDefault();

Arquivo do artigo - jQuery Events: Stop (Mis) Using Return False

— Ryan
fonte

13

Como alternativa, você pode retornar false a partir do evento click:

 $('div.toggle').hide();
 $('ul.product-info li a').click(function(event){
  $(this).next('div').slideToggle(200);
+ return false; 
 });

O que impediria o disparo do A-Href.

Observe, no entanto, por razões de usabilidade, em um mundo ideal que o href ainda deve ir a algum lugar, para as pessoas que desejam abrir o link em uma nova guia;)

— Kent Fredric
fonte

1

Sim, eu acho que eu estava respondendo o que eu pensei que sua intenção era, em vez da questão :)

— Kent Fredric

Pelo que vale, muitos anos atrás, foi anunciado que você retornasse -1 para evitar que o href fosse acionado. Acho que isso não funciona mais em QUALQUER navegador, e você deve "retornar falso" para impedir o salto da página.

— Randy

12

Esta é uma solução não JQuery que acabei de testar e funciona.

<html lang="en">
<head>
<script type="text/javascript">
addEventListener("load",function(){
    var links= document.getElementsByTagName("a");
    for (var i=0;i<links.length;i++){
        links[i].addEventListener("click",function(e){
        alert("NOPE!, I won't take you there haha");
        //prevent event action
        e.preventDefault();
        })
    }
}); 

</script>
</head>
<body>
<div>
<ul>
    <li><a href="http://www.google.com">Google</a></li>
    <li><a href="http://www.facebook.com">Facebook</a></li>
    <p id="p1">Paragraph</p>
</ul>
</div>
<p>By Jefrey Bulla</p>
</body>
</html>

— Jefrey Bulla
fonte

12

<ul class="product-info">
  <li>
    <a href="javascript:void(0);">YOU CLICK THIS TO SHOW/HIDE</a>
      <div class="toggle">
        <p>CONTENT TO SHOW/HIDE</p>
      </div>
  </li>
</ul>

Usar

javascript: vazio (0);

— HATCHA
fonte

@AhmadSharif Eu testei no FF 40.0.3 e no IE 11 hoje, ainda há trabalho.

— HATCHA

1

Eu acho que o void (0) pode ser feio / confuso para os usuários, que podem vê-lo quando passam o mouse pelo link. Você pode realmente colocar qualquer JS válido, então eu gostaria de colocar um comentário que descreva o que ele faz. por exemplohref="javascript:// Send Email"

— colllin 10/11

11

Contudo uma outra maneira de fazer isso em JavaScript usando inline onclick, IIFE, evente preventDefault():

<a href='#' onclick="(function(e){e.preventDefault();})(event)">Click Me</a>

— A-Sharabiani
fonte

Oi, ou simplesmente<a href='#' onclick="event.preventDefault()">Click Me</a>

— ankabot 12/07

6

após várias operações, quando a página finalmente deve ir para o link, você pode fazer o seguinte:

          jQuery("a").click(function(e){
            var self = jQuery(this);
            var href = self.attr('href');
            e.preventDefault();
            // needed operations

            window.location = href;
          });

— 1nstinct
fonte

1

Por que fazer preventDefaulte depois executar a ação padrão você mesmo? Basta fazer o que você precisa adicionar e deixar o padrão ainda ocorrer.

— Nathanvda 13/01

5

Por que não apenas fazê-lo em css?

Retire o atributo 'href' na sua marca de âncora

<ul class="product-info">
  <li>
    <a>YOU CLICK THIS TO SHOW/HIDE</a>
    <div class="toggle">
      <p>CONTENT TO SHOW/HIDE</p>
    </div>
  </li>
</ul>

Em seu css,

  a{
    cursor: pointer;
    }

1

Desta forma, vai perder a: atributo pairar nos maus navegadores (ou seja familiar)

— Strae

4

Se a interrupção da propagação do evento não o incomoda, basta usar

return false;

no final do seu manipulador. No jQuery, impede o comportamento padrão e interrompe a borbulhagem do evento.

— sebarmeli
fonte

4

Você pode fazer uso da return false;chamada de evento para interromper a propagação do evento, que age como uma event.preventDefault();negação. Ou você pode usar o javascript:void(0)atributo href para avaliar a expressão especificada e retornar undefinedao elemento.

Retornando o evento quando é chamado:

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

Caso nulo:

<a href="javascript:void(0);"> ... </a>

Você pode ver mais sobre: Qual é o efeito de adicionar void (0) para href e 'return false' no ouvinte de evento de clique da tag anchor?

— RPichioli
fonte