พิจารณาทำเครื่องหมายตัวจัดการเหตุการณ์เป็น 'แฝง' เพื่อให้หน้าตอบสนองได้ดีขึ้น

ฉันกำลังใช้ฆ้อนสำหรับลากและมันก็เริ่มขาดหายไปเมื่อโหลดสิ่งอื่น ๆ เนื่องจากข้อความเตือนนี้บอกฉัน

การจัดการกิจกรรมอินพุต 'touchstart' ล่าช้าสำหรับ X ms เนื่องจากเธรดหลักไม่ว่าง พิจารณาทำเครื่องหมายตัวจัดการเหตุการณ์เป็น 'แฝง' เพื่อให้หน้าตอบสนองได้ดีขึ้น

ดังนั้นฉันจึงพยายามเพิ่ม 'passive' ให้กับผู้ฟังเช่นนั้น

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

แต่ฉันยังคงได้รับคำเตือนนี้

สำหรับผู้ที่ได้รับคำเตือนนี้เป็นครั้งแรกมันเป็นเพราะคุณสมบัติที่ทันสมัยที่เรียกว่าPassive Event Listenersซึ่งมีการใช้งานในเบราว์เซอร์ค่อนข้างเร็ว ๆ นี้ (ฤดูร้อนปี 2559) จากhttps://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md :

ฟังเหตุการณ์แบบพาสซีฟเป็นคุณสมบัติใหม่ในข้อมูลจำเพาะ DOM ที่ช่วยให้นักพัฒนาสามารถเลือกใช้ประสิทธิภาพการเลื่อนที่ดีขึ้นโดยไม่จำเป็นต้องเลื่อนเพื่อบล็อกผู้ฟังเหตุการณ์แบบสัมผัสและวงล้อ นักพัฒนาซอฟต์แวร์สามารถใส่คำอธิบายประกอบแบบสัมผัสและฟังแบบวงล้อด้วย {passive: true} เพื่อระบุว่าพวกเขาจะไม่เรียกใช้ PreventDefault คุณลักษณะนี้จัดส่งใน Chrome 51, Firefox 49 และลงจอดใน WebKit สำหรับคำอธิบายอย่างเป็นทางการแบบเต็มอ่านเพิ่มเติมได้ที่นี่

ดูเพิ่มเติม: ผู้ฟังเหตุการณ์แฝงคืออะไร

คุณอาจต้องรอให้ไลบรารี. js ของคุณใช้งานการสนับสนุน

หากคุณกำลังจัดการกิจกรรมทางอ้อมผ่านห้องสมุด JavaScript คุณอาจอยู่ในความเมตตาของห้องสมุดที่ให้การสนับสนุนคุณสมบัติดังกล่าว จนถึงเดือนธันวาคม 2562 ดูเหมือนว่าห้องสมุดหลัก ๆ จะมีการสนับสนุน ตัวอย่างบางส่วน:

• jQuery.js - ปัญหาต่อเนื่อง: https://github.com/jquery/jquery/issues/2871
• React.js - ปัญหาต่อเนื่อง: https://github.com/facebook/react/issues/6436
• Hammer.js - ปิดเนื่องจากไม่มีการติดตาม: https://github.com/hammerjs/hammer.js/pull/987
• perfect-scrollbar - ปิด: https://github.com/noraesae/perfect-scrollbar/issues/560
• AngularJS - ปิดเนื่องจากจะไม่แก้ไข: https://github.com/angular/angular.js/issues/15901

สิ่งนี้ซ่อนข้อความเตือน:

jQuery.event.special.touchstart = {
  setup: function( _, ns, handle ) {
      this.addEventListener("touchstart", handle, { passive: !ns.includes("noPreventDefault") });
  }
};

พบสิ่งนี้ในปลั๊กอินดร็อปดาวน์ select2 ใน Laravel เปลี่ยนค่าตามที่ Alfred Wallace แนะนำ

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

ถึง

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

แก้ปัญหา ทำไมเขาถึงลงคะแนนเสียงฉันไม่รู้ แต่มันเหมาะกับฉัน

สำหรับผู้ที่ติดอยู่กับปัญหาแบบดั้งเดิมค้นหาบรรทัดการโยนข้อผิดพลาดและเพิ่ม{passive: true}- เช่น:

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

กลายเป็น

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

สำหรับ jquery-ui-dragable กับ jquery-ui-touch-punch ฉันแก้ไขมันคล้ายกับIvánRodríguez แต่มีการแทนที่เหตุการณ์อีกหนึ่งรายการสำหรับ touchmove:

jQuery.event.special.touchstart = {
    setup: function( _, ns, handle ) {
        this.addEventListener('touchstart', handle, { passive: !ns.includes('noPreventDefault') });
    }
};
jQuery.event.special.touchmove = {
    setup: function( _, ns, handle ) {
        this.addEventListener('touchmove', handle, { passive: !ns.includes('noPreventDefault') });
    }
};

ฉันพบวิธีแก้ปัญหาที่ใช้งานได้กับjQuery 3.4.1 แบบบาง

หลังจากยกเลิกการลดขนาดให้เพิ่ม{passive: true}ฟังก์ชัน addEventListener ในบรรทัด 1567 ดังนี้:

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

ไม่มีอะไรหยุดพักและการตรวจสอบประภาคารไม่บ่นเกี่ยวกับผู้ฟัง