Event.preventDefault () vs. kembali salah

Ketika saya ingin event handler lain dijalankan setelah suatu peristiwa tertentu dipicu, saya bisa menggunakan salah satu dari dua metode. Saya akan menggunakan jQuery dalam contoh, tetapi ini juga berlaku untuk plain-JS:

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 cara ini untuk menghentikan penyebaran acara?

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

Selain itu, saya harus menentukan parameter pertama dalam panggilan balik agar dapat memanggil metode. Mungkin ada beberapa alasan mengapa saya harus menghindari ini dan menggunakan preventDefault sebagai gantinya? Apa cara terbaik?

2661
31 авг. ditetapkan oleh RaYell 31 Agustus 2009-08-31 14:58 '09 pada 14:58 2009-08-31 14:58
@ 13 jawaban

return false dari event handler jQuery sebenarnya sama dengan panggilan e.stopPropagation dan e.stopPropagation di objek jQuery.Event yang diteruskan .

e.preventDefault() mencegah acara tersebut terjadi secara default, e.stopPropagation() mencegah acara membengkak dan return false akan melakukan keduanya. Harap dicatat bahwa perilaku ini berbeda dari penangan acara biasa (non-jQuery), di mana, khususnya, return false tidak menghentikan suatu peristiwa dari gelembung.

Sumber: John Resig

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

2609
31 авг. jawabannya diberikan karim79 31 Agustus. 2009-08-31 15:05 '09 pada 15:05 2009-08-31 15:05

Dalam pengalaman saya, setidaknya ada satu keuntungan yang jelas ketika menggunakan fungsi event.preventDefault () dengan return false. Misalkan Anda menangkap acara klik pada tag yang mengikat, jika tidak maka akan menjadi masalah besar jika pengguna harus pergi dari halaman saat ini. Jika penangan klik Anda menggunakan return false untuk mencegah navigasi browser, itu membuka kemungkinan bahwa juru bahasa tidak mencapai pernyataan pengembalian, dan browser akan terus menjalankan perilaku default untuk tag anchor.

 $('a').click(function (e) { // custom handling here // oops...runtime error...where oh where will the href take me? return false; }); 

Keuntungan menggunakan event.preventDefault () adalah Anda dapat menambahkannya sebagai baris pertama di handler, dengan demikian memastikan bahwa perilaku default tidak akan berfungsi secara default, terlepas dari apakah baris terakhir dari fungsi tidak tercapai (misalnya, .).

 $('a').click(function (e) { e.preventDefault(); // custom handling here // oops...runtime error, but at least the user isn't navigated away. }); 
393
23 янв. Jawaban yang diberikan oleh Jeff Poulton 23 Jan 2011-01-23 01:37 '11 pada 1:37 2011-01-23 01:37

Ini bukan apa yang Anda sebut itu, pertanyaannya adalah "javascript"; Ini adalah pertanyaan desain jQuery.

jQuery dan kutipan terkait sebelumnya dari John Resig ( posting karim79 ) tampaknya menjadi sumber kesalahpahaman tentang cara kerja penangan acara umumnya bekerja.

Fakta: Pengatur kejadian yang mengembalikan false mencegah tindakan default untuk peristiwa ini. Ini tidak menghentikan penyebaran acara. Penangan acara selalu bekerja dengan cara ini, mulai dari masa lalu Netscape Navigator.

Dokumentasi MDN menjelaskan bagaimana return false dalam event handler bekerja.

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

Untuk bacaan lebih lanjut, lihat melampirkanEvent di MSDN dan W3C DOM 2 Dokumentasi Acara .

89
21 июня '10 в 0:31 2010-06-21 00:31 jawabannya diberikan oleh Garrett 21 Juni '10 pada 0:31 2010-06-21 00:31

Biasanya, opsi pertama Anda ( preventDefault() ) adalah opsi yang perlu Anda ambil, tetapi Anda perlu tahu apa konteks Anda dan apa tujuan Anda.

Bahan Bakar Pengkodean Anda memiliki artikel bagus tentang return false; vs event.preventDefault() vs event.stopPropagation() vs event.stopImmediatePropagation() .

CATATAN Di tautan di atas "Mengisi kode Anda" untuk waktu yang cukup lama, kesalahan 5xx telah dihasilkan. Saya menemukan salinannya di arsip Internet , mencetaknya dalam format PDF dan meletakkannya di Dropbox: Artikel yang diarsipkan sebagai return false; vs event.preventDefault() vs event.stopPropagation() vs event.stopImmediatePropagation() (PDF)

>
58
09 апр. Jawabannya diberikan JAAulde 09 April. 2011-04-09 21:32 '11 pada 21:32 2011-04-09 21:32

Saat menggunakan jQuery, return false melakukan 3 operasi terpisah saat Anda menyebutnya:

  • event.preventDefault();
  • event.stopPropagation();
  • Berhentilah menelepon dan kembali segera saat dipanggil.

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

51
19 февр. Jawaban yang diberikan oleh James Drinkard pada 19 Februari. 2013-02-19 18:54 '13 pada 18:54 2013-02-19 18:54

Anda dapat menggantung banyak fungsi di acara onClick untuk satu item. Bagaimana Anda bisa yakin bahwa yang false akan menjadi yang terakhir? preventDefault , di sisi lain, pasti hanya akan mencegah perilaku default elemen.

38
31 авг. balasan yang diberikan oleh Eldar Djafarov 31 Agt 2009-08-31 15:02 '09 pada 15:02 2009-08-31 15:02

Saya pikir

event.preventDefault()

- w3c adalah metode yang ditentukan untuk membatalkan acara.

Anda dapat membaca ini dalam spesifikasi W3C untuk Membatalkan Acara .

Juga, Anda tidak dapat menggunakan return false dalam setiap situasi. Saat menyediakan fungsi javascript di atribut href dan mengembalikan false, pengguna akan diarahkan ke halaman dengan string palsu.

18
31 авг. jawabannya diberikan rahul 31 agustus. 2009-08-31 15:04 '09 pada 15:04 2009-08-31 15:04

Saya pikir cara terbaik untuk melakukan ini adalah dengan menggunakan event.preventDefault() karena jika ada event.preventDefault() dalam event.preventDefault() handler, maka pernyataan false dikembalikan akan dilewati dan perilaku akan berlawanan dengan apa yang Anda inginkan.

Tetapi jika Anda yakin bahwa kode tidak akan memunculkan pengecualian, Anda bisa menggunakan salah satu metode yang Anda inginkan.

Jika Anda masih ingin kembali dengan false , maka Anda dapat meletakkan semua kode pawang di blok tangkap, seperti yang ditunjukkan di bawah ini:

 $('a').click(function (e) { try{ your code here......... } catch(e){} return false; }); 
13
09 марта '13 в 22:27 2013-03-09 22:27 jawabannya diberikan oleh Naga Srinu Kapusetti 09 Maret '13 pada 22:27 2013-03-09 22:27

Perbedaan antara preventDefault () dan mengembalikan false sebagai berikut:

preventDefault () : itu hanya menghentikan perilaku browser default.

return false : itu membuat 3 objek terpisah ketika Anda menyebutnya:

  • Ini menghentikan perilaku default browser.
  • Ini mencegah acara DOM dari menyebarkan.
  • Berhentilah menelepon dan kembali segera saat dipanggil.

Penggunaan sesuai dengan kebutuhan Anda:

1) Jika Anda hanya ingin menonaktifkan perilaku browser default, gunakan fungsi preventDefault ().

2) Jika Anda ingin mencegah perilaku browser default dan mencegah acara DOM dari merambat, gunakan return false.

0
02 дек. jawaban yang diberikan oleh GSB 02 Des. 2017-12-02 22:18 '17 pada 10:18 malam 2017-12-02 22:18

Pada dasarnya, ini adalah cara Anda menggabungkan berbagai hal, karena jQuery adalah struktur yang terutama berfokus pada elemen HTML, kebanyakan mencegah default, tetapi pada saat yang sama Anda berhenti menyebar ke gelembung.

Dengan demikian, kita dapat dengan mudah mengatakan bahwa mengembalikan false di jQuery sama dengan:

return false adalah e.preventDefault dan e.stopPropagation

Tetapi juga jangan lupa tentang ini dalam fungsi yang terkait dengan jQuery atau DOM, ketika Anda menjalankannya pada suatu elemen, pada dasarnya itu mencegah semuanya dari penembakan, termasuk perilaku default dan propagasi acara.

Pada dasarnya, sebelum menggunakan return false; pertama-tama pahami apa itu e.preventDefault(); dan e.stopPropagation(); lakukan, jika Anda pikir Anda membutuhkan keduanya sekaligus, gunakan saja.

Jadi, pada dasarnya kode ini di bawah ini:

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

sama dengan kode ini:

 $('div').click(function (event) { event.preventDefault(); event.stopPropagation(); }); 
0
18 июля '18 в 14:07 2018-07-18 14:07 Jawaban diberikan oleh Alireza pada 18 Juli '18 pukul 14:07 2018-07-18 14:07

Perbedaan utama antara return false dan event.preventDefault() adalah bahwa kode Anda di bawah return false tidak akan dieksekusi, dan dalam hal event.preventDefault() kode Anda akan dieksekusi setelah pernyataan ini.

Ketika Anda menulis return false, Anda melakukan hal-hal berikut di belakang layar.

 * Stops callback execution and returns immediately when called. * event.stopPropagation(); * event.preventDefault(); 
0
09 февр. Balas diberikan oleh Abdullah Shoaib 09 Feb. 2018-02-09 11:14 '18 pada 11:14 2018-02-09 11:14

Pendapat saya dalam pengalaman saya mengatakan bahwa selalu lebih baik untuk digunakan

 event.preventDefault() 

Praktis untuk menghentikan atau mencegah pengiriman acara saat diperlukan, daripada return false event.preventDefault() berfungsi dengan baik.

0
29 сент. Jawabannya diberikan Dilip0165 29 sept . 2014-09-29 14:28 '14 pada 14:28 2014-09-29 14:28

e.preventDefault ();

Itu hanya menghentikan tindakan default item.

Contoh Instan :-

mencegah hyperlink mengikuti URL, tidak mengizinkan tombol kirim untuk mengirimkan formulir Ketika Anda memiliki banyak penangan acara, dan Anda hanya ingin mencegah acara default karena ini, dan karena ini berkali-kali, untuk ini kita perlu menggunakan di bagian atas fungsi ().

Alasan: -

Alasan menggunakan e.preventDefault(); terletak pada fakta bahwa dalam kode kita sehingga sesuatu tidak berfungsi dalam kode, maka itu akan memungkinkan Anda untuk mengeksekusi tautan atau formulir untuk mengirim atau mengizinkan eksekusi atau mengizinkan tindakan apa pun yang perlu Anda lakukan. Tautan atau kirim akan dikirim dan masih memungkinkan acara berlanjut.

 <!DOCTYPE html> <html > 
0
27 апр. Balas diberikan oleh Parth Raval 27 Apr 2018-04-27 09:55 '18 pada 9:55 2018-04-27 09:55

Pertanyaan lain tentang tag atau ajukan pertanyaan