preventDefault () pada tag <a>

133

Saya memiliki beberapa HTML dan jQuery yang divmenggeser ke atas dan ke bawah untuk menampilkan atau menyembunyikannya ketika sebuah tautan diklik:

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

Pertanyaan saya adalah: Bagaimana cara saya preventDefault()menghentikan tautan yang bertindak sebagai tautan dan menambahkan "#" di bagian akhir URL saya & melompat ke bagian atas halaman?

Saya tidak dapat menemukan sintaks yang tepat, saya hanya terus mendapatkan pesan kesalahan

preventDefault () bukan suatu fungsi.

javascript jquery Chris J Allen
sumber

Jawaban:

194

Coba sesuatu seperti:

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

Ini adalah halaman tentang itu di dokumentasi jQuery

Davide Gualano
sumber
53

Tetapkan hrefatribut sebagaihref="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
sumber
Permata kecil yang bagus untuk jangkar - terima kasih! Adakah yang bisa menjelaskan mengapa ini berhasil?
justinpage
8
hrefAtribut @KLVTZ dari anchor tag ( a) mungkin tidak kosong ... Tetapi kita dapat mengaturnya javascript:<code-here>, yang legal / valid. Kami kemudian memasukkan <code-here>hanya pernyataan kosong dengan menambahkan tanda titik koma. Dengan cara ini tautannya tidak melakukan apa-apa.
Stijn de Witt
1
Terima kasih banyak! Ini memungkinkan saya untuk menerapkan fungsi tombol kembali (mengingat keadaan yang ditetapkan oleh pushState () di seluruh halaman) ke dalam remah roti CalePHP seperti $ this-> Html-> addCrumb ('Sessions', 'javascript: window.history.back (); ');
Patronaut
38

Disarankan agar Anda tidak menggunakan return false, karena 3 hal terjadi sebagai hasilnya:

  1. event.preventDefault ();
  2. event.stopPropagation ();
  3. Menghentikan eksekusi panggilan balik dan segera kembali saat dipanggil.

Jadi dalam situasi seperti ini, Anda sebaiknya hanya menggunakan event.preventDefault();

Arsip artikel - Acara jQuery: Stop (Mis) Menggunakan Return False

Ryan
sumber
13

Atau, Anda bisa mengembalikan false dari peristiwa klik: 

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

Yang akan menghentikan A-Href dipicu.

Namun perhatikan, untuk alasan kegunaan, di dunia ideal yang href masih harus pergi ke suatu tempat, untuk orang-orang yang ingin membuka tautan di tab baru;)

Kent Fredric
sumber
1
ya, saya pikir saya menjawab apa yang saya pikir maksud Anda alih-alih pertanyaan :)
Kent Fredric
Untuk apa nilainya, bertahun-tahun yang lalu disebut-sebut bahwa Anda harus mengembalikan -1 untuk mencegah href dipicu. Saya tidak berpikir itu berfungsi di browser APA PUN lagi, dan Anda harus "mengembalikan false" untuk mencegah halaman melompat.
Randy
12

Ini adalah solusi non-JQuery yang baru saja saya uji dan berfungsi. 

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

Menggunakan

javascript: void (0);

HATCHA
sumber
@AhmadSharif Saya sudah menguji FF 40.0.3 dan IE 11 hari ini, masih ada yang berhasil.
HATCHA
1
Saya pikir void (0) bisa jelek / membingungkan bagi pengguna, yang bisa melihatnya ketika mereka mengarahkan tautan. Anda benar-benar dapat menempatkan JS yang valid, jadi saya ingin memberikan komentar yang menjelaskan apa yang dilakukannya. mishref="javascript:// Send Email"
colllin
11

Namun cara lain untuk melakukan hal ini di Javascript menggunakan inline onclick, IIFE, eventdan preventDefault():

<a href='#' onclick="(function(e){e.preventDefault();})(event)">Click Me</a>
A-Sharabiani
sumber
Hai, atau cukup<a href='#' onclick="event.preventDefault()">Click Me</a>
ankabot
6

setelah beberapa operasi, ketika halaman akhirnya harus terhubung, Anda dapat melakukan hal berikut:

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

            window.location = href;
          });
1 naluri
sumber
1
Mengapa melakukannya preventDefault, lalu melakukan sendiri tindakan default? Lakukan saja apa yang perlu Anda tambahkan, dan biarkan default masih terjadi.
nathanvda
5

Mengapa tidak melakukannya saja di css?

Keluarkan atribut 'href' di tag anchor Anda

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

Di css kamu,

  a{
    cursor: pointer;
    }

sumber
1
Dengan cara ini akan kehilangan atribut: hover di browser yang buruk (mis. Keluarga)
Strae
4

Jika menghentikan penyebaran acara tidak mengganggu Anda, gunakan saja 

return false;

di akhir pawang Anda. Di jQuery itu mencegah perilaku default dan menghentikan acara yang menggelegak.

sebarmeli
sumber
4

Anda dapat memanfaatkan dari return false;ajang acara untuk menghentikan propagasi acara, berfungsi seperti event.preventDefault();meniadakannya. Atau Anda dapat menggunakan javascript:void(0)atribut href untuk mengevaluasi ekspresi yang diberikan dan kemudian kembali undefinedke elemen.

Mengembalikan acara saat dipanggil:

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

Kasus kosong:

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

Anda dapat melihat lebih banyak tentang di: Apa efek dari menambahkan void (0) untuk href dan 'return false' pada klik event listener dari anchor tag?

RPichioli
sumber