การคลิกใดบ้างที่ไม่ใช่ click สําหรับนักพัฒนาเว็บที่ทํางานกับอินเทอร์เฟซผู้ใช้ที่ซับซ้อน คำถามนี้ไม่ใช่คำถามเชิงปรัชญานามธรรม หากคุณกำลังใช้ลักษณะการป้อนข้อมูลด้วยเมาส์ที่กำหนดเอง คุณควรคำนึงถึงความตั้งใจของผู้ใช้ เช่น หากผู้ใช้คลิกลิงก์ด้วยปุ่มกลางของเมาส์ ก็น่าจะอนุมานได้ว่าผู้ใช้ต้องการเปิดแท็บใหม่ที่มีเนื้อหาของลิงก์นั้น หากผู้ใช้คลิกกลางบนองค์ประกอบ UI แบบสุ่ม คุณอาจต้องถือว่าการคลิกนั้นเกิดจากความผิดพลาดและละเว้นอินพุตนั้น ขณะที่การคลิกปุ่มหลักควรทริกเกอร์การตอบสนองจาก UI
คุณอาจจําลองการโต้ตอบที่มีรายละเอียดเหล่านี้ผ่าน click Listener เหตุการณ์เดียวได้ (แต่อาจยุ่งยากไปหน่อย) คุณจะต้องตรวจสอบพร็อพเพอร์ตี้ MouseEvent ของ button อย่างชัดเจนเพื่อดูว่ามีการตั้งค่าเป็น 0 ซึ่งแสดงถึงปุ่มหลัก หรือเป็นค่าอื่น ซึ่งโดยปกติ 1 จะแสดงถึงปุ่มกลาง และอื่นๆ แต่นักพัฒนาแอปเพียงไม่กี่รายที่ตรวจสอบพร็อพเพอร์ตี้ button อย่างชัดแจ้ง ซึ่งส่งผลให้โค้ดจัดการ click ทั้งหมดในลักษณะเดียวกัน ไม่ว่าผู้ใช้จะกดปุ่มใดก็ตาม
ตั้งแต่ Chrome 55 เป็นต้นไป ระบบจะเรียกใช้ MouseEvent ประเภทใหม่ที่เรียกว่า auxclick เพื่อตอบสนองต่อการคลิกด้วยปุ่มที่ไม่ใช่ปุ่มหลัก เหตุการณ์ใหม่นี้มาพร้อมกับการเปลี่ยนแปลงลักษณะการทํางานของเหตุการณ์ click ที่เกี่ยวข้อง ซึ่งจะทํางานเมื่อมีการกดปุ่มเมาส์หลักเท่านั้น เราหวังว่าการเปลี่ยนแปลงเหล่านี้จะช่วยให้นักพัฒนาเว็บเขียนตัวแฮนเดิลเหตุการณ์ที่ตอบสนองต่อประเภทการคลิกที่ต้องการได้ง่ายๆ โดยไม่ต้องตรวจสอบพร็อพเพอร์ตี้ MouseEvent.button โดยเฉพาะ
ลดผลบวกลวง
ดังที่ได้กล่าวไว้ข้างต้น แรงจูงใจอย่างหนึ่งในการสร้าง auxclick คือเพื่อหลีกเลี่ยงการติดตั้งใช้งานตัวแฮนเดิล click ที่กําหนดเองซึ่งลบล้างลักษณะการทํางานของ "การคลิกกลางเปิดแท็บ" โดยไม่ได้ตั้งใจ ตัวอย่างเช่น สมมติว่าคุณเขียน click event handler ที่ใช้ History API เพื่อเขียนแถบที่อยู่ใหม่และใช้การนําทางหน้าเว็บเดียวที่กําหนดเอง ซึ่งอาจมีลักษณะดังนี้
document.querySelector('#my-link').addEventListener('click', event => {
event.preventDefault();
// ...call history.pushState(), use client-side rendering, etc....
});
ตรรกะที่กำหนดเองอาจทำงานตามที่ตั้งใจไว้เมื่อมีการทริกเกอร์โดยปุ่มหลักของเมาส์ แต่หากโค้ดดังกล่าวทำงานเมื่อมีการคลิกปุ่มกลาง แสดงว่าเป็นการทริกเกอร์ที่ผิดพลาด ก่อนที่จะมีการทำงานแบบใหม่ คุณจะป้องกันการดำเนินการเริ่มต้นของการเปิดแท็บใหม่ ซึ่งขัดต่อความคาดหวังของผู้ใช้
แม้ว่าคุณจะตรวจสอบ event.button === 0 อย่างชัดเจนที่จุดเริ่มต้นของตัวแฮนเดิล และเรียกใช้โค้ดเฉพาะในกรณีที่เป็นเช่นนั้น แต่คุณก็อาจลืมตรวจสอบหรือไม่เคยตระหนักว่าจำเป็นต้องทำเช่นนั้น
เรียกใช้เฉพาะโค้ดที่ต้องการ
อีกด้านหนึ่งของผลบวกลวงที่น้อยลงคือ auxclickการเรียกกลับจะทํางานก็ต่อเมื่อมีการปุ่มเมาส์ที่ไม่ใช่ปุ่มหลักเท่านั้น หากมีโค้ดที่ต้องดำเนินการ เช่น คํานวณ URL ปลายทางที่เหมาะสมก่อนเปิดแท็บใหม่ คุณสามารถฟัง auxclick และใส่ตรรกะนั้นไว้ในการเรียกกลับ จึงไม่เกิดค่าใช้จ่ายเพิ่มเติมเมื่อมีการคลิกปุ่มเมาส์หลัก
การรองรับและความเข้ากันได้กับเบราว์เซอร์
ปัจจุบันมีการใช้ลักษณะการทำงานใหม่นี้ใน Chrome 55 เท่านั้น ตามที่ได้กล่าวไว้ในข้อเสนอเริ่มต้น เรายินดีรับฟังความคิดเห็น (ทั้งเชิงบวกและเชิงลบ) จากชุมชนนักพัฒนาเว็บ การแจ้งปัญหาใน GitHub เป็นวิธีที่ดีที่สุดในการแชร์ความคิดเห็นดังกล่าวกับผู้ที่กำลังดำเนินการตามกระบวนการมาตรฐาน
ในระหว่างนี้ นักพัฒนาแอปไม่ต้องรอให้ auxclick พร้อมให้บริการในวงกว้างเพื่อปฏิบัติตามแนวทางปฏิบัติแนะนำบางอย่างในการจัดการเหตุการณ์เมาส์ หากคุณสละเวลาตรวจสอบค่าของพร็อพเพอร์ตี้ MouseEvent.button ที่จุดเริ่มต้นของตัวแฮนเดิลเหตุการณ์ click ก็จะมั่นใจได้ว่าคุณจะดําเนินการอย่างเหมาะสม รูปแบบต่อไปนี้จะจัดการการคลิกหลักและรองแตกต่างกัน ไม่ว่าจะมีการรองรับ auxclick แบบเนทีฟหรือไม่ก็ตาม
function handlePrimaryClick(event) {
// ...code to handle the primary button click...
}
function handleAuxClick(event) {
// ...code to handle the auxiliary button click….
}
document.querySelector('#my-link').addEventListener('click', event => {
if (event.button === 0) {
return handlePrimaryClick(event);
}
// This provides fallback behavior in browsers without auxclick.
return handleAuxClick(event);
});
// Explicitly listen for auxclick in browsers that support it.
document.querySelector('#my-link').addEventListener('auxclick', handleAuxClick);