ความสามารถของอุปกรณ์อินพุต

Paul Kinlan

Twitter GitHub Glitch Mastodon หน้าแรก

Chrome 47 มีฟีเจอร์ใหม่ที่ช่วยให้คุณเข้าใจง่ายขึ้นว่าผู้ใช้ โต้ตอบกับเว็บไซต์อย่างไร นั่นคือ InputDeviceCapabilities! ย้อนกลับไปอีกหน่อยและเรียนรู้ว่าสิ่งนี้สำคัญอย่างไร

เหตุการณ์อินพุต DOM เป็นนามธรรมที่อยู่เหนือเหตุการณ์อินพุตระดับต่ำ โดยเชื่อมโยง กับอินพุตของอุปกรณ์จริงอย่างหลวมๆ (เช่น เหตุการณ์ click สามารถเริ่มทำงานโดยใช้เมาส์ หน้าจอสัมผัส หรือแป้นพิมพ์) แต่กลับมีปัญหาเพราะไม่มีวิธีง่ายๆ ในการดูรายละเอียดของอุปกรณ์ที่ก่อให้เกิดเหตุการณ์

นอกจากนี้ อินพุตบางประเภทยังสร้างเหตุการณ์อินพุต DOM "ปลอม" ได้อีกด้วยเหตุผลด้านความเข้ากันได้ เหตุการณ์ DOM ปลอมดังกล่าวจะเกิดขึ้นเมื่อผู้ใช้แตะหน้าจอสัมผัส (เช่น บนโทรศัพท์มือถือ) เหตุการณ์ดังกล่าวไม่เพียงแค่เริ่มเหตุการณ์การแตะเท่านั้น แต่ยังเรียกให้เหตุการณ์เกี่ยวกับเมาส์เริ่มทำงานด้วยด้วยเหตุผลด้านความเข้ากันได้

การดำเนินการนี้ทำให้เกิดปัญหาสำหรับนักพัฒนาซอฟต์แวร์เมื่อรองรับการป้อนข้อมูลด้วยเมาส์และการสัมผัส ไม่ทราบว่าเหตุการณ์ mousedown แสดงถึงอินพุตใหม่จากเมาส์จริงๆ หรือไม่ หรือเป็นเพียงเหตุการณ์ความเข้ากันได้สําหรับเหตุการณ์ Touchstart ที่ประมวลผลก่อนหน้า

InputDeviceCapabilities API ใหม่ให้รายละเอียดเกี่ยวกับแหล่งที่มาสำคัญ ของเหตุการณ์อินพุตผ่านออบเจ็กต์ sourceCapabilities ใน UIEvent
ออบเจ็กต์มีพร็อพเพอร์ตี้ firesTouchEvents ที่ตั้งค่าเป็น true หรือ false ตาม วิธีสร้างเหตุการณ์จากการดำเนินการของผู้ใช้

คำถามคือ ควรใช้ที่ใด

ปัจจุบันนี้นอกเหนือจากเหตุการณ์ของ Pointer นักพัฒนาซอฟต์แวร์จำนวนมากจะจัดการตรรกะสำหรับการโต้ตอบในเลเยอร์การสัมผัสเพื่อป้องกันไม่ให้ค่าเริ่มต้นหลีกเลี่ยงการสร้างเหตุการณ์เมาส์ "ปลอม" ตั้งแต่แรก การออกแบบนี้ทำงานได้ดีในหลายสถานการณ์และไม่จำเป็นต้องเปลี่ยนแปลงเพื่อใช้ประโยชน์จาก InputDeviceCapabilities

แต่ในบางสถานการณ์ คุณไม่ต้องการป้องกันค่าเริ่มต้นเหตุการณ์การแตะ เช่น คุณยังต้องการการแตะเพื่อส่งเหตุการณ์ "คลิก" และเปลี่ยนโฟกัส สำหรับกรณีเหล่านี้ ข้อมูลที่คงไว้ชั่วคราวในพร็อพเพอร์ตี้ MouseEvent.sourceCapabilities.firesTouchEvents จะช่วยให้คุณเริ่มรวมตรรกะสำหรับเหตุการณ์การแตะและเหตุการณ์ที่ใช้เมาส์เป็นโมเดลที่คล้ายกับวิธีจัดการตรรกะด้วยเหตุการณ์ของตัวชี้ กล่าวคือ คุณสามารถมีโค้ดเพียงชุดเดียวที่จัดการตรรกะการโต้ตอบ และช่วยให้นักพัฒนาซอฟต์แวร์แชร์ตรรกะระหว่างเบราว์เซอร์ที่รองรับและไม่รองรับเหตุการณ์ตัวชี้ได้ง่ายขึ้น

function addMouseEventListener(target, type, handler, capture) {  
    target.addEventListener(type, function(e) {  
    if (e.sourceCapabilities.firesTouchEvents)  
        return false;  
    return handler(e);  
    }, capture);  
}

ข่าวดีก็คือวิดีโอนี้ได้รับการ Polyfilled โดย Rick Byers เพื่อให้คุณใช้งานได้ในแพลตฟอร์มส่วนใหญ่

ปัจจุบัน API นี้มีขนาดเล็กมาก โดยเน้นไปที่การแก้ปัญหาปัญหาเฉพาะในการระบุเหตุการณ์เมาส์ที่ได้จากเหตุการณ์การแตะ นอกจากนี้ยังสามารถสร้างอินสแตนซ์ของ InputDeviceCapabilities ได้ด้วย แต่อินสแตนซ์มีเพียง firesTouchEvents เท่านั้น ในอนาคต เราวางแผนที่จะขยายการทำงาน เพื่อช่วยให้คุณเข้าใจอุปกรณ์อินพุตทั้งหมดในระบบของผู้ใช้มากขึ้น เราอยากทราบความคิดเห็นของคุณเกี่ยวกับ กรณีการใช้งาน