Pertanyaan event.preventDefault () vs. return false


Ketika saya ingin mencegah penangan kejadian lain dari 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 penyebaran acara?

Untuk saya, return false; lebih sederhana, lebih pendek dan mungkin kurang rawan kesalahan daripada mengeksekusi metode. Dengan metode ini, Anda harus ingat tentang casing yang benar, tanda kurung, dll.

Juga, saya harus menentukan parameter pertama di callback untuk dapat memanggil metode. Mungkin, ada beberapa alasan mengapa saya harus menghindari melakukannya seperti ini dan gunakan preventDefault sebagai gantinya? Apa cara yang lebih baik?


2646
2017-08-31 11:58


asal


Jawaban:


return false dari dalam event handler jQuery secara efektif sama dengan memanggil keduanya e.preventDefault dan e.stopPropagation pada lulus jQuery.Event objek.

e.preventDefault() akan mencegah kejadian default terjadi, e.stopPropagation() akan mencegah acara tersebut meluap dan return false akan melakukan keduanya. Perhatikan bahwa perilaku ini berbeda dari normal (Penangan acara non-jQuery), di mana, terutama, return false tidak tidak hentikan acara dari meluap.

Sumber: John Resig

Manfaat apa pun untuk menggunakan event.preventDefault () di atas "return false" untuk membatalkan klik href?


2596
2017-08-31 12:05



Dari pengalaman saya, setidaknya ada satu keuntungan yang jelas ketika menggunakan event.preventDefault () atas menggunakan return false. Misalkan Anda menangkap peristiwa klik pada tag anchor, jika tidak, itu akan menjadi masalah besar jika pengguna harus dinavigasi dari halaman saat ini. Jika handler klik Anda menggunakan return false untuk mencegah navigasi browser, itu membuka kemungkinan bahwa interpreter tidak akan mencapai pernyataan kembali dan browser akan melanjutkan untuk mengeksekusi 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 dalam handler, dengan demikian menjamin bahwa perilaku default jangkar tidak akan menyala, terlepas dari apakah baris terakhir dari fungsi tidak tercapai (mis. Error runtime ).

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

  // custom handling here

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

392
2018-01-22 22:37



Ini bukan, karena Anda telah memberinya judul, pertanyaan "JavaScript"; itu adalah pertanyaan mengenai desain jQuery.

jQuery dan kutipan terkait sebelumnya dari John Resig (di karim79  pesan) tampaknya menjadi kesalahpahaman sumber tentang bagaimana penangan kejadian dalam pekerjaan umum.

Fakta: Penangan kejadian yang mengembalikan salah mencegah tindakan default untuk peristiwa itu. Itu tidak menghentikan propagasi acara. Penangan acara selalu bekerja dengan cara ini, sejak zaman Netscape Navigator yang lama.

Itu dokumentasi dari MDN menjelaskan caranya return false dalam event handler bekerja

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

Untuk bacaan lebih lanjut, lihat attachEvent di MSDN dan W3C DOM 2 Dokumentasi acara.


89
2018-06-20 21:31



Umumnya, opsi pertama Anda (preventDefault()) adalah yang harus diambil, tetapi Anda harus tahu apa konteks Anda dan apa tujuan Anda.

Bakar Kode Coding Anda memiliki hebat artikel tentang return false; vs event.preventDefault() vs event.stopPropagation() vs event.stopImmediatePropagation().

CATATAN: Itu Bakar Kode Coding Anda tautan di atas telah menghasilkan kesalahan 5xx selama beberapa waktu. Saya telah menemukan salinannya di Arsip Internet, cetak ke PDF, dan letakkan di Dropbox: Diarsipkan artikel tentang return false; vs event.preventDefault() vs event.stopPropagation() vs event.stopImmediatePropagation()  (PDF)


58
2018-04-09 18:32



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

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

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


51
2018-02-19 15:54



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


37
2017-08-31 12:02



kupikir

event.preventDefault()

adalah cara spesifik W3c untuk membatalkan acara.

Anda dapat membaca ini di spesifikasi W3C Pembatalan acara.

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


17
2017-08-31 12:04



Saya pikir cara terbaik untuk melakukan ini adalah menggunakan event.preventDefault() karena jika beberapa pengecualian dibangkitkan di handler, maka kembalinya false pernyataan akan dilewati dan perilaku akan berlawanan dengan apa yang Anda inginkan.

Tetapi jika Anda yakin bahwa kode tidak akan memicu pengecualian apa pun, Anda dapat menggunakan metode apa pun yang Anda inginkan.

Jika Anda masih ingin pergi dengan kembali false, maka Anda dapat menempatkan seluruh kode pawang Anda di blok tangkap coba seperti di bawah ini:

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

13
2018-03-09 19:27



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

event.preventDefault() 

Praktis         untuk menghentikan atau mencegah pengiriman acara, kapan pun kami inginkan daripada return false event.preventDefault() bekerja dengan baik.


0
2017-09-29 11:28