Bir <a> etiketinde preventDefault ()

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.

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

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>

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

1. event.preventDefault ();
2. Event.stopPropagation ();
3. 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ış)

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

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>

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

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>

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

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

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.

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?