event.preventDefault () vs. return false

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?

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?

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

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 .

Secara umum, opsi pertama Anda ( preventDefault()) adalah pilihan yang harus diambil, tetapi Anda harus tahu konteks apa yang Anda hadapi dan apa tujuan Anda.

Bahan bakar Anda Coding memiliki besar artikel tentang return false;vs event.preventDefault()vs event.stopPropagation()vsevent.stopImmediatePropagation() .

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.

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.

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.

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

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.

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

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>

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

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