Bir <a> etiketinde preventDefault ()

133

divBir bağlantı tıklandığında göstermek veya gizlemek için yukarı ve aşağı kayan bazı HTML ve jQuery'im var:

<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);
}

Sorum şu: preventDefault()Bağlantının bağlantı görevi görmesini ve URL'min sonuna "#" eklemesini ve sayfanın üst kısmına atlamayı nasıl durdurabilirim?

Doğru sözdizimini bulamıyorum, sadece bir hata alıyorum

preventDefault () bir işlev değildir.

javascript jquery

— Chris J Allen
kaynak

194

Şöyle bir şey dene:

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

İşte jQuery belgelerinde bununla ilgili sayfa

— Davide Gualano
kaynak

53

hrefÖzniteliği şu şekilde ayarlayın:href="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
kaynak

Çapalar için güzel küçük mücevher - teşekkürler! Bunun neden işe yaradığını kimse açıklayabilir mi?

— justinpage

8

hrefÇapa etiketinin ( a) @KLVTZ özniteliği boş olmayabilir ... Ancak bunu javascript:<code-here>yasal / geçerli olarak ayarlayabiliriz . Daha sonra <code-here>noktalı virgül ekleyerek sadece boş bir ifade giriyoruz . Bu şekilde bağlantı hiçbir şey yapmaz.

— Stijn de Witt

1

Çok teşekkürler! Bu, CalePHP'nin bu $ this-> Html-> addCrumb ('Oturumlar', 'javascript: window.history.back (); ');

— Patronot

38

Sonuç return falseolarak 3 şey meydana geldiği için kullanmamanız önerilir :

event.preventDefault ();
Event.stopPropagation ();
Geri arama yürütmeyi durdurur ve çağrıldığında hemen geri döner.

Dolayısıyla bu tür bir durumda, gerçekten yalnızca event.preventDefault();

Makale arşivi - jQuery Olayları: Yanlış Dönüş Kullanarak Durdur (Yanlış)

— Ryan
kaynak

13

Alternatif olarak, tıklama etkinliğinden yalnızca yanlış döndürebilirsiniz:

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

Bu, A-Href'in tetiklenmesini durdurur.

Bununla birlikte, kullanılabilirlik nedenlerinden ötürü, href'in bir yere gitmesi gereken ideal bir dünyada, bağlantıyı yeni sekmede açmak isteyen kişiler için;)

— Kent Fredric
kaynak

1

evet, sanırım soru yerine niyetinin ne olduğunu düşündüğümü cevaplıyordum :)

— Kent Fredric

Değeri ne olursa olsun, yıllar önce href'in tetiklenmesini önlemek için -1 döndürmeniz gerektiği lanse edildi. Bunun artık HERHANGİ tarayıcıda çalıştığını sanmıyorum ve sayfanın atlamasını önlemek için "yanlış döndürmeniz" gerekir.

— Randy

12

Bu az önce test ettiğim JQuery olmayan bir çözüm ve çalışıyor.

<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
kaynak

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>

kullanım

JavaScript: void (0);

— Hatcha
kaynak

@AhmadSharif Bugün FF 40.0.3 ve IE 11 üzerinde test ettim, hala iş var.

— HATCHA

1

Bence void (0), bağlantının üzerine geldiklerinde onu görebilen kullanıcılar için çirkin / kafa karıştırıcı olabilir. Aslında herhangi bir geçerli JS koyabilirsiniz, bu yüzden ne yaptığını açıklayan bir yorum koymak isterim. örneğinhref="javascript:// Send Email"

— colllin

11

Oysa kullanarak JavaScript bunu yapmanın başka bir yolu inline onclick, IIFE, eventve preventDefault():

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

— A-Sharabiani
kaynak

Merhaba, ya da basitçe<a href='#' onclick="event.preventDefault()">Click Me</a>

— ankabot

6

Birkaç işlemden sonra, sayfanın sonunda bağlantıya gitmesi gerektiğinde aşağıdakileri yapabilirsiniz:

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

            window.location = href;
          });

— 1nstinct
kaynak

1

Neden yapın preventDefaultve sonra varsayılan eylemi kendiniz yapın? Sadece eklemeniz gerekeni yapın ve varsayılanın gerçekleşmesine izin verin.

— nathanvda

5

Neden css ile yapmıyorsunuz?

Bağlantı etiketinizdeki "href" özelliğini çıkarın

<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>

CSS'nizde

  a{
    cursor: pointer;
    }

1

Bu şekilde kötü tarayıcılarda (yani aile): hover özniteliğini kaybedecek

— Strae

4

Olayın yayılmasını durdurmak sizi rahatsız etmiyorsa, sadece

return false;

işleyicinizin sonunda. JQuery'de varsayılan davranışı engeller ve olay köpürmesini durdurur.

— sebarmeli
kaynak

4

Sen yararlanabilirler return false;bir gibi davranır, olay yayılmasını durdurmak için olay çağrısından event.preventDefault();negating o. Veya javascript:void(0)verilen ifadeyi değerlendirmek için href özniteliğini kullanabilir ve ardından undefinedöğeye geri dönebilirsiniz .

Olay çağrıldığında geri döndürme:

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

Geçersiz durum:

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

Şu konuda daha fazlasını görebilirsiniz: href için void (0) eklemenin ve bağlantı etiketinin tıklama olay dinleyicisine 'yanlış döndür' eklemenin etkisi nedir?

— RPichioli
kaynak