event.preventDefault () vs. return false


2961

Ketika saya ingin mencegah penangan acara lain mengeksekusi setelah peristiwa tertentu dipecat, saya dapat menggunakan salah satu dari dua teknik. Saya akan menggunakan jQuery dalam contoh, tetapi ini berlaku untuk plain-JS juga:

1. event.preventDefault()

$('a').click(function (e) {
    // custom handling here
    e.preventDefault();
});

2. return false

$('a').click(function () {
    // custom handling here
    return false;
});

Apakah ada perbedaan yang signifikan antara kedua metode menghentikan propagasi acara?

Bagi saya, return false;lebih sederhana, lebih pendek dan mungkin lebih sedikit kesalahan daripada mengeksekusi metode. Dengan metode ini, Anda harus mengingat casing yang tepat, tanda kurung, dll.

Juga, saya harus menentukan parameter pertama dalam panggilan balik untuk dapat memanggil metode. Mungkin, ada beberapa alasan mengapa saya harus menghindari melakukannya seperti ini dan menggunakannya preventDefault? Apa cara yang lebih baik?


172
Perhatikan bahwa jQuery preventDefaulttidak tidak mencegah kidal lainnya dari mengeksekusi. Itu untuk apa stopImmediatePropagation.
Crescent Fresh

19
@CrescentFresh, itu mencegah penangan lain (selanjutnya terikat) dari mengeksekusi ... pada node DOM peristiwa dipecat. Itu tidak mencegah propagasi.
kelopak mata

37
Ini bukan "dua metode untuk menghentikan propagasi acara?" e.preventDefault (); mencegah tindakan default, itu tidak menghentikan propagasi acara, yang dilakukan oleh e.stopPropagation ().
Timo Tijhof

24
Pertanyaan ini dan jawabannya adalah tentang jQuery. Jika Anda datang ke sini mencari jawaban javascript biasa, lihat event.preventDefault () vs. return false (no jQuery)
Oriol

5
Jawaban ini memiliki tabel yang menjelaskan semuanya stackoverflow.com/a/5302939/759452
Adrien Be

Jawaban:


2818

return falsedari dalam event handler jQuery secara efektif sama dengan memanggil keduanya e.preventDefaultdan e.stopPropagationpada objek jQuery.Event yang dilewati .

e.preventDefault()akan mencegah terjadinya peristiwa default, e.stopPropagation()akan mencegah acara meleleh dan return falseakan melakukan keduanya. Perhatikan bahwa perilaku ini berbeda dari yang normal penangan (-jQuery non) acara, di mana, terutama, return falsetidak tidak menghentikan acara dari meluapkan.

Sumber: John Resig

Adakah manfaat menggunakan event.preventDefault () di atas "return false" untuk membatalkan klik href?


126
return falsedari penangan DOM2 ( addEventListener) tidak melakukan apa-apa sama sekali (tidak mencegah default atau berhenti menggelegak; dari penangan Microsoft DOM2-ish ( attachEvent), ia mencegah default tetapi tidak menggelegak; dari penangan DOM0 ( onclick="return ..."), ia mencegah default (disediakan Anda memasukkan returndalam atribut) tetapi tidak menggelegak; dari event handler jQuery, ia melakukan keduanya, karena itu adalah hal jQuery. Rincian dan tes langsung di sini
TJ Crowder

12
Akan sangat membantu untuk mendefinisikan "Propagasi" dan "Default" di sini. Saya sendiri terus membingungkan mereka. Apakah ini benar? Propagasi = kode saya (penangan event JavaScript untuk elemen induk). Default = kode browser (tautan, pemilihan teks, dll.)
Bob Stein

5
apa yang sebenarnya dimaksud dengan menggelegak? contoh?
Govinda Sakhare

5
1 untuk mencatat bahwa return falsetidak tidak berhenti propagasi acara di non-jQuery event handler. yaitu <a href="#" onclick="return false">Test</a>tidak tidak menghentikan acara dari meluapkan.
Doug S

424

Dari pengalaman saya, setidaknya ada satu keuntungan yang jelas saat menggunakan event.preventDefault () dibandingkan menggunakan return false. Misalkan Anda menangkap acara klik pada tag jangkar, jika tidak maka akan menjadi masalah besar jika pengguna harus dinavigasi menjauh dari halaman saat ini. Jika click handler Anda menggunakan false kembali untuk mencegah navigasi browser, itu membuka kemungkinan bahwa juru bahasa tidak akan mencapai pernyataan kembali dan browser akan melanjutkan untuk menjalankan perilaku default tag anchor.

$('a').click(function (e) {
  // custom handling here

  // oops...runtime error...where oh where will the href take me?

  return false;
});

Manfaat menggunakan event.preventDefault () adalah Anda dapat menambahkan ini sebagai baris pertama di handler, dengan demikian menjamin bahwa perilaku default anchor tidak akan menyala, terlepas dari apakah baris terakhir fungsi tidak tercapai (mis. Kesalahan runtime ).

$('a').click(function (e) {
  e.preventDefault();

  // custom handling here

  // oops...runtime error, but at least the user isn't navigated away.
});

68
Sementara benar, perilaku sebaliknya sering lebih disukai ketika melakukan peningkatan progresif (yang saya pikir mungkin merupakan alasan yang paling mungkin untuk mengesampingkan tindakan default)
meandmycode

Keduanya adalah cara untuk memblokir perilaku default suatu peristiwa, itu hanya masalah masalah apa yang Anda coba selesaikan.
Ferkze

102

Ini bukan, seperti yang Anda beri judul, pertanyaan "JavaScript"; itu adalah pertanyaan tentang desain jQuery.

jQuery dan kutipan terkait sebelumnya dari John Resig (dalam pesan karim79 ) tampaknya menjadi sumber kesalahpahaman tentang bagaimana event handler pada umumnya bekerja.

Fakta: Pengatur kejadian yang mengembalikan false mencegah tindakan default untuk kejadian itu. Itu tidak menghentikan propagasi acara. Penangan acara selalu bekerja seperti ini, sejak masa lalu Netscape Navigator.

The dokumentasi dari MDN menjelaskan bagaimana return falsedalam sebuah event handler bekerja

Apa yang terjadi di jQuery tidak sama dengan apa yang terjadi dengan penangan acara. Pendengar acara DOM dan acara "terlampir" MSIE adalah masalah yang berbeda sama sekali.

Untuk bacaan lebih lanjut, lihat attachEvent di MSDN dan dokumentasi W3C DOM 2 Events .


6
@rds Itu mengatakan "preventDefault tidak menghentikan propagasi lebih lanjut dari acara melalui DOM. event.stopPropagation harus digunakan untuk itu."
Garrett

Sebuah jawaban pada pertanyaan yang berkaitan erat menuduh bahwa sebelum HTML 5, mengembalikan false dari event handler tidak ditentukan sebagai melakukan apa pun. Sekarang, mungkin itu interpretasi yang salah dari spec (sulit dipahami), atau mungkin meskipun tidak dispesifikasikan secara harfiah semua browser diinterpretasikan return falsesama dengan event.preventDefault(). Tapi saya tidak tahu; itu cukup untuk membuat saya mengambil ini dengan sejumput garam.
Mark Amery

9
Aku benci bagaimana setiap hasil pencarian javascript di google sebenarnya tentang jQuery, +1
Alexander Derck

Dia telah menandai itu sebagai JavaScript dan jQuery, dan keduanya benar. jQueryhanyalah sub-set JavaScript, bukan bahasanya sendiri.
ProfK


57

Saat menggunakan jQuery, return falsemelakukan 3 hal terpisah ketika Anda menyebutnya:

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

Lihat Acara jQuery: Stop (Mis) Menggunakan Return False untuk informasi dan contoh lebih lanjut.


Jika bagian lain dari kode mendengarkan acara ini, event.stopPropagation (); akan membatalkan panggilan balik mereka?
Ferkze

41

Anda dapat menggantung banyak fungsi pada onClickacara tersebut untuk satu elemen. Bagaimana Anda bisa yakin yang falseakan menjadi yang terakhir menembak? preventDefaultdi sisi lain pasti hanya akan mencegah perilaku default elemen.


20

kupikir

event.preventDefault()

adalah cara yang ditentukan w3c untuk membatalkan acara.

Anda dapat membaca ini dalam spesifikasi W3C pada pembatalan acara .

Anda juga tidak dapat menggunakan return false dalam setiap situasi. Ketika memberikan fungsi javascript dalam atribut href dan jika Anda mengembalikan false maka pengguna akan diarahkan ke halaman dengan string palsu yang ditulis.


4
Tidak di browser apa pun yang pernah saya temui. Mungkin Anda bingung dengan itu <a href="javascript:return false"atau apa?
mplungjan

10
-1; klaim bahwa href yang mengembalikan false akan menghasilkan halaman teks dengan kata "false" yang tertulis di atasnya adalah omong kosong.
Mark Amery

1
(minus) 1; broken link + omong kosong lengkap
Phil

15

Saya pikir cara terbaik untuk melakukan ini adalah menggunakan event.preventDefault()karena jika beberapa pengecualian dimunculkan dalam handler, maka falsepernyataan kembali akan dilewati dan perilaku akan berlawanan dengan apa yang Anda inginkan.

Tetapi jika Anda yakin bahwa kode tersebut tidak akan memicu pengecualian, maka Anda dapat menggunakan salah satu metode yang Anda inginkan.

Jika Anda masih ingin kembali false, maka Anda dapat meletakkan seluruh kode penangan Anda di blok catch catch seperti di bawah ini:

$('a').click(function (e) {
  try{
      your code here.........
  }
   catch(e){}
  return false;
});

1

Pendapat saya dari pengalaman saya mengatakan, bahwa selalu lebih baik digunakan

event.preventDefault() 

Praktis untuk menghentikan atau mencegah ajukan acara, setiap kali kami diminta daripada return false event.preventDefault()berfungsi dengan baik.


11
Mengapa lebih baik Anda benar-benar tidak memberikan justifikasi apa pun di sini. -1.
Mark Amery

Jika ada beberapa binding acara, e.preventDefault () lebih bertarget daripada return false.
Taiger

preventDefaultadalah beberapa kata bahasa Inggris yang saya mengerti "mencegah default". return falseadalah beberapa kata bahasa Inggris yang saya mengerti "mengembalikan salah" tetapi saya tidak tahu mengapa sampai saya Google ini kode samar. Dan bonus, saya dapat mengontrol secara terpisah stopPropagationdan preventDefault .
Joan

1

Perbedaan utama antara return falsedan event.preventDefault()adalah bahwa kode Anda di bawah return falseini tidak akan dieksekusi dan masukevent.preventDefault() jika kode Anda akan dieksekusi setelah pernyataan ini.

Ketika Anda menulis kembali salah itu melakukan hal-hal berikut untuk Anda di belakang layar.

* Stops callback execution and returns immediately when called.
* event.stopPropagation();
* event.preventDefault();

1

e.preventDefault ();

Itu hanya menghentikan aksi default suatu elemen.

Instance Ex.:-

mencegah hyperlink mengikuti URL, mencegah tombol kirim untuk mengirimkan formulir. Ketika Anda memiliki banyak pengendali acara dan Anda hanya ingin mencegah terjadinya peristiwa default, & terjadi berulang kali, untuk itu kita perlu menggunakan di bagian atas fungsi ().

Alasan:-

Alasan penggunaannya e.preventDefault();adalah bahwa dalam kode kita ada sesuatu yang salah dalam kode, maka itu akan memungkinkan untuk mengeksekusi tautan atau formulir untuk dikirimkan atau mengizinkan untuk mengeksekusi atau mengizinkan tindakan apa pun yang perlu Anda lakukan. & tautan atau tombol kirim akan dikirimkan & masih memungkinkan penyebaran acara lebih lanjut.

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <a href="https://www.google.com" onclick="doSomethingElse()">Preventsss page from redirect</a>
      <script type="text/javascript">
         function doSomethingElse(){
           console.log("This is Test...");
         }
         $("a").click(function(e){
          e.preventDefault(); 
         });
      </script>
   </body>
</html>

mengembalikan False;

Ini hanya menghentikan eksekusi fungsi ().

" return false;" akan mengakhiri seluruh proses eksekusi.

Alasan:-

Alasan menggunakan return false; adalah Anda tidak ingin menjalankan fungsi lagi dalam mode ketat.

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <a href="#" onclick="returnFalse();">Blah</a>
      <script type="text/javascript">
         function returnFalse(){
         console.log("returns false without location redirection....")
             return false;
             location.href = "http://www.google.com/";
         
         }
      </script>
   </body>
</html>


1

Pada dasarnya, cara ini Anda menggabungkan hal-hal karena jQuery adalah kerangka kerja yang sebagian besar berfokus pada elemen HTML, pada dasarnya Anda mencegah default, tetapi pada saat yang sama, Anda menghentikan propagasi untuk muncul.

Jadi kita bisa mengatakan, return false in jQuerysama dengan:

return false adalah e.preventDefault AND e.stopPropagation

Tapi juga jangan lupa itu semua dalam fungsi terkait jQuery atau DOM, ketika Anda menjalankannya pada elemen, pada dasarnya, itu mencegah semuanya dari penembakan termasuk perilaku default dan penyebaran acara.

Pada dasarnya sebelum mulai menggunakan return false;, pahami dulu apa e.preventDefault();dane.stopPropagation(); melakukannya, maka jika Anda berpikir Anda membutuhkan keduanya pada saat yang sama, maka cukup menggunakannya.

Jadi pada dasarnya kode di bawah ini:

$('div').click(function () {
  return false;
});

adalah sama dengan kode ini:

$('div').click(function (event) {
  event.preventDefault();
  event.stopPropagation();
});

1

Dari pengalaman saya event.stopPropagation () sebagian besar digunakan dalam efek CSS atau karya animasi, misalnya ketika Anda memiliki efek hover untuk kedua elemen kartu dan tombol, ketika Anda mengarahkan pada tombol, efek kartu dan tombol hover akan dipicu dalam kasus ini. , Anda dapat menggunakan event.stopPropagation () menghentikan tindakan yang menggelegak, dan event.preventDefault () adalah untuk mencegah perilaku default tindakan browser. Misalnya, Anda memiliki formulir tetapi Anda hanya menetapkan acara klik untuk tindakan pengiriman, jika pengguna mengirimkan formulir dengan menekan enter, browser dipicu oleh peristiwa penekanan tombol, bukan acara klik Anda di sini, Anda harus menggunakan event.preventDefault () untuk menghindari yang tidak pantas tingkah laku. Saya tidak tahu apa yang dikembalikan palsu; maaf. Untuk klarifikasi lebih lanjut, kunjungi tautan ini dan mainkan dengan baris # 33https://www.codecademy.com/courses/introduction-to-javascript/lessons/requests-i/exercises/xhr-get-request-iv

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.