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

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:

event.preventDefault ();
event.stopPropagation ();
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;
    }

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