preventDefault () em uma tag

Eu tenho alguns html / jquery que desliza um div para cima e para baixo para mostrar / ocultar, quando um link é clicado:

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

Minha pergunta é: Como eu uso preventDefault() para parar o link agindo como um link e adicionando # ao final do meu URL e pular para o topo da página?

Não consigo descobrir a syntax certa, continuo recebendo um erro dizendo que preventDefault () não é uma function.

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

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

  1. event.preventDefault ();
  2. event.stopPropagation ();
  3. Para a execução do retorno de chamada e retorna imediatamente quando chamado.

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

Arquivo do artigo – Eventos jQuery: Stop (Mis) Using Return False

Defina o atributo href como href="javascript:;"

  

Alternativamente, você poderia apenas retornar false do evento click:

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

O que impediria que o A-Href fosse acionado.

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

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

      

By Jefrey Bulla

  

Usar

javascript: void (0);

Por que não apenas fazer isso em css?

Remova o atributo “href” na sua tag de âncora

  

No seu css,

  a{ cursor: pointer; } 

depois de várias operações, quando a página deve finalmente 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; }); 

Se parar a propagação do evento não incomodar você, apenas use

 return false; 

no final do seu manipulador. No jQuery, ele evita o comportamento padrão e impede que o evento borbulhe.

Você pode fazer uso de return false; a partir da chamada de evento para interromper a propagação do evento, ele age como um event.preventDefault(); negando isso. Ou você pode usar javascript:void(0) no atributo href para avaliar a expressão dada e, em seguida, retornar undefined para o elemento.

Retornando o evento quando é chamado:

  ...  

Caso vazio:

  ...  

Você pode ver mais sobre em: Qual é o efeito de adicionar void (0) para href e ‘return false’ no listener de evento de clique da tag de âncora?

Ainda uma outra maneira de fazer isso em JavaScript usando inline onclick , IIFE , event e preventDefault() inline onclick :

 Click Me