Chrome 47 มีฟีเจอร์ใหม่ที่ช่วยให้คุณเข้าใจวิธีที่ผู้ใช้โต้ตอบกับเว็บไซต์ได้ง่ายขึ้น นั่นคือ InputDeviceCapabilities เรามาย้อนกลับไปดูความสำคัญของเรื่องนี้กัน
เหตุการณ์การป้อนข้อมูล DOM เป็นการแยกความคิดที่อยู่เหนือเหตุการณ์การป้อนข้อมูลระดับต่ำ ซึ่งเชื่อมโยงกับอินพุตของอุปกรณ์จริงอย่างหลวมๆ (เช่น เหตุการณ์ click สามารถเรียกให้แสดงโดยเมาส์ หน้าจอสัมผัส หรือแป้นพิมพ์) แต่มีปัญหาอยู่ตรงที่ไม่มีวิธีง่ายๆ ในการดูรายละเอียดของอุปกรณ์จริงที่ทำให้เกิดเหตุการณ์
นอกจากนี้ อินพุตบางประเภทยังสร้างเหตุการณ์อินพุต DOM "จำลอง" เพิ่มเติมได้เพื่อเหตุผลด้านความเข้ากันได้ เหตุการณ์ DOM จําลองดังกล่าวเกิดขึ้นเมื่อผู้ใช้แตะหน้าจอสัมผัส (เช่น ในโทรศัพท์มือถือ) ซึ่งไม่เพียงแต่จะทริกเกอร์เหตุการณ์การสัมผัสเท่านั้น แต่ยังทริกเกอร์เหตุการณ์เมาส์ด้วยเพื่อเหตุผลด้านความเข้ากันได้
ซึ่งจะทำให้เกิดปัญหาสำหรับนักพัฒนาแอปเมื่อรองรับทั้งการป้อนข้อมูลด้วยเมาส์และการแตะ เป็นการยากที่จะทราบว่าเหตุการณ์ mousedown แสดงถึงอินพุตใหม่จากเมาส์จริง หรือเป็นเพียงเหตุการณ์ที่เข้ากันได้สําหรับเหตุการณ์ touchstart ที่ประมวลผลก่อนหน้านี้
InputDeviceCapabilities API ใหม่ให้รายละเอียดเกี่ยวกับแหล่งที่มาของเหตุการณ์อินพุตที่เป็นต้นทางผ่านออบเจ็กต์ sourceCapabilities ใน UIEvent
ออบเจ็กต์มีพร็อพเพอร์ตี้ firesTouchEvents ที่ตั้งค่าเป็น true หรือ false โดยอิงตามวิธีที่เหตุการณ์สร้างขึ้นจากการกระทำของผู้ใช้
คำถามคือควรใช้รูปแบบนี้ที่ไหน
นอกเหนือจากเหตุการณ์เคอร์เซอร์แล้ว ปัจจุบันนักพัฒนาซอฟต์แวร์จํานวนมากจัดการตรรกะสําหรับการโต้ตอบในเลเยอร์การสัมผัส ซึ่งป้องกันไม่ให้ค่าเริ่มต้นสร้างเหตุการณ์เมาส์ "ปลอม" ตั้งแต่แรก การออกแบบนี้ทํางานได้ดีในหลายสถานการณ์และไม่จำเป็นต้องเปลี่ยนแปลงเพื่อใช้ประโยชน์จาก InputDeviceCapabilities
แต่ในบางสถานการณ์ คุณไม่ต้องการ preventDefault เหตุการณ์การแตะจริงๆ ตัวอย่างเช่น คุณยังคงต้องการให้การแตะส่งเหตุการณ์ "คลิก" และเปลี่ยนโฟกัส สําหรับกรณีเหล่านี้ ข้อมูลที่อยู่ในพร็อพเพอร์ตี้ MouseEvent.sourceCapabilities.firesTouchEvents จะช่วยให้คุณเริ่มรวมตรรกะสําหรับเหตุการณ์ที่เกิดจากการแตะและการใช้เมาส์เข้าด้วยกันเป็นรูปแบบที่คล้ายกับวิธีที่คุณจัดการตรรกะด้วย Pointer Event กล่าวคือ คุณจะใช้โค้ดเพียงชุดเดียวในการจัดการตรรกะการโต้ตอบได้ และช่วยให้นักพัฒนาซอฟต์แวร์แชร์ตรรกะระหว่างเบราว์เซอร์ที่รองรับและไม่รองรับ Pointer Event ได้ง่ายขึ้น
function addMouseEventListener(target, type, handler, capture) {
target.addEventListener(type, function(e) {
if (e.sourceCapabilities.firesTouchEvents)
return false;
return handler(e);
}, capture);
}
ข่าวดีก็คือ Rick Byers ได้ทดแทนองค์ประกอบนี้เพื่อให้คุณนำไปใช้ได้ในแพลตฟอร์มส่วนใหญ่
ปัจจุบัน API นี้มีฟังก์ชันการทำงานน้อยมาก โดยมุ่งเน้นที่การแก้ปัญหาปัญหาเฉพาะในการระบุเหตุการณ์เมาส์ที่มาจากเหตุการณ์การสัมผัส
คุณสามารถสร้างอินสแตนซ์ของ InputDeviceCapabilities ได้ แต่จะมีเพียง firesTouchEvents เท่านั้น ในอนาคตเราคาดว่าจะขยายฟีเจอร์นี้เพื่อให้คุณเข้าใจเพิ่มเติมเกี่ยวกับอุปกรณ์อินพุตทั้งหมดในระบบของผู้ใช้ เราอยากทราบความคิดเห็นของคุณเกี่ยวกับกรณีการใช้งาน