Pertimbangkan menandai pengendali acara sebagai 'pasif' untuk membuat halaman lebih responsif

217

Saya menggunakan palu untuk menyeret dan itu menjadi berombak ketika memuat hal-hal lain, karena pesan peringatan ini memberi tahu saya.

Penanganan acara input 'touchstart' tertunda selama X ms karena utas utama sedang sibuk. Pertimbangkan menandai pengendali acara sebagai 'pasif' untuk membuat halaman lebih responsif.

Jadi saya mencoba menambahkan 'pasif' ke pendengar seperti itu

Hammer(element[0]).on("touchstart", function(ev) {
  // stuff
}, {
  passive: true
});

tapi saya masih mendapatkan peringatan ini.

Mat
sumber

Jawaban:

264

Bagi mereka yang menerima peringatan ini untuk pertama kalinya, ini disebabkan oleh fitur tepi pendarahan yang disebut Pendengar Peristiwa Pasif yang telah diterapkan di browser baru-baru ini (musim panas 2016). Dari https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md :

Pendengar acara pasif adalah fitur baru dalam spesifikasi DOM yang memungkinkan pengembang untuk ikut serta dalam kinerja gulir yang lebih baik dengan menghilangkan kebutuhan gulir untuk memblokir pendengar acara sentuh dan roda. Pengembang dapat membuat anotasi pendengar sentuh dan roda dengan {pasif: true} untuk menunjukkan bahwa mereka tidak akan pernah memanggil preventDefault. Fitur ini dikirimkan di Chrome 51, Firefox 49 dan mendarat di WebKit. Untuk penjelasan resmi selengkapnya, baca selengkapnya di sini.

Lihat juga: Apa itu pendengar acara pasif?

Anda mungkin harus menunggu pustaka .js Anda untuk mengimplementasikan dukungan.

Jika Anda menangani acara secara tidak langsung melalui pustaka JavaScript, Anda mungkin berada di bawah dukungan pustaka tertentu untuk fitur tersebut. Pada Desember 2019, itu tidak terlihat seperti perpustakaan utama yang telah mengimplementasikan dukungan. Beberapa contoh:

Anson Kao
sumber
16
bagaimana dengan perpustakaan ionik?
abhit
10
Saya menelepon preventDefault()- Apakah mungkin untuk menekan peringatan ini?
maja
12
Google Maps JavaScript API versi 3 juga menghasilkan peringatan ini. Masalah sedang dilacak di issuetracker.google.com/issues/63211698 . (Agak ironis, mengingat bahwa Google Chrome memperingatkan tentang pelanggaran yang dihasilkan Google Maps JavaScript API.)
Jochem Schulenklopper
6
untuk menekan peringatan ini, Anda dapat `addEventListener ('touchstart', this.callPassedFuntion, {pasif: false})`
Shlomi Schwartz
8

Ini menyembunyikan pesan peringatan:

jQuery.event.special.touchstart = 
{
  setup: function( _, ns, handle )
  {
    if ( ns.includes("noPreventDefault") ) 
    {
      this.addEventListener("touchstart", handle, { passive: false });
    } 
    else 
    {
      this.addEventListener("touchstart", handle, { passive: true });
    }
  }
};
Iván Rodríguez
sumber
5
Bukankah tujuannya adalah menghentikan acara yang sebenarnya? Saya tidak ingin menyembunyikan pesan sampai saya menyelesaikan masalah ini.
yardpenalty.com
1
Saya pikir ini adalah masalah perpustakaan jquery. Saya pikir pengembang harus memperbaikinya. Tetapi jika Anda akan mendapatkannya, beri tahu saya cara melakukannya. Terima kasih banyak.
Iván Rodríguez
Pasti Ivan! Ya itu. Hai, sekarang saya ingin tahu ... Saya menggunakan plugin d3 dan saya mendapatkan sekitar 2300 pelanggaran. Mungkin kode Anda akan membantu! Saya akan membuat Anda tetap diposting!
yardpenalty.com
@ yardpenalty.com, tidak, menghentikan acara bukanlah tujuannya! Peringatan menyatakan Anda telah menempatkan pendengar Anda tanpa menentukan apakah itu mungkin atau mungkin tidak mencegah perilaku default pada acara tersebut. Jika Anda memiliki kasus di mana Anda ingin menelepon preventDefault(), Anda harus menentukan passive: false. Jika tidak, sebutkan passive: true. Anda hanya mendapatkan peringatan jika Anda tidak menentukannya. Jika Anda menentukan passive: truedan preventDefault()dipanggil, itu menghasilkan kesalahan dan default tidak dicegah. Menentukan passivebukan hack di sini. Itu solusinya . Itu yang diminta peringatan!
tao
@ Tao terima kasih atas komentarnya. Sudah beberapa tahun tetapi saya pasti akan mengingat solusinya di masa depan!
yardpenalty.com
1

Juga temui ini di plugin dropdown select2 di Laravel. Mengubah nilai seperti yang disarankan oleh Alfred Wallace dari

this.element.addEventListener(t, e, !1)

untuk

this.element.addEventListener(t, e, { passive: true} )

memecahkan masalah. Mengapa dia memilih, saya tidak tahu, tetapi itu berhasil untuk saya.

Jun Salen
sumber
0

Bagi mereka yang terjebak dengan masalah lawas, temukan garis yang melempar kesalahan dan tambahkan {passive: true}- misalnya:

this.element.addEventListener(t, e, !1)

menjadi

this.element.addEventListener(t, e, { passive: true} )
Alfred Wallace
sumber
-1

Saya menemukan solusi yang berfungsi pada jQuery 3.4.1 slim

Setelah un-minifying, tambahkan {passive: true}ke fungsi addEventListener on line 1567 seperti:

t.addEventListener(p, a, {passive: true}))

Tidak ada yang rusak dan audit mercusuar tidak mengeluh tentang pendengarnya.

Mark Lancaster
sumber
1
jangan pernah mengubah kode sumber perpustakaan; Anda harus menimpanya.
Raptor