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

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.

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:

• jQuery.js - masalah berkelanjutan: https://github.com/jquery/jquery/issues/2871
• React.js - masalah berkelanjutan: https://github.com/facebook/react/issues/6436
• Hammer.js - ditutup karena tidak ada tindak lanjut: https://github.com/hammerjs/hammer.js/pull/987
• perfect-scrollbar - closed: https://github.com/noraesae/perfect-scrollbar/issues/560
• AngularJS - ditutup karena tidak akan diperbaiki: https://github.com/angular/angular.js/issues/15901

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

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.

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

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.