เมื่อใดที่การคลิกไม่ใช่ click สำหรับนักพัฒนาเว็บที่ทำงานด้วยอินเทอร์เฟซผู้ใช้
ที่ซับซ้อน นี่ไม่ใช่คำถามเชิงปรัชญาเชิงนามธรรม หากคุณกำลังใช้การป้อนข้อมูลด้วยเมาส์ที่กำหนดเอง
สิ่งสำคัญที่ต้องคำนึงถึงคือเจตนาของผู้ใช้ ตัวอย่างเช่น หากผู้ใช้คลิกลิงก์ด้วยปุ่มกลางของเมาส์ ก็ถือว่าเป็นเหตุผลที่คาดว่าผู้ใช้ต้องการเปิดแท็บใหม่ด้วยเนื้อหาของลิงก์นั้น หากผู้ใช้คลิกกลางที่องค์ประกอบ UI แบบสุ่ม คุณอาจต้องคิดว่าเหตุการณ์ดังกล่าวไม่ตั้งใจและเพิกเฉยต่ออินพุตนั้น ขณะที่การคลิกปุ่มหลักจะเป็นการทริกเกอร์การตอบสนองจาก UI
อาจเป็นไปได้ในกรณีที่ยุ่งยากเล็กน้อยในการสร้างรูปแบบการโต้ตอบที่แตกต่างกันเล็กน้อยเหล่านี้ผ่าน Listener เหตุการณ์ click รายการเดียว คุณต้องตรวจสอบพร็อพเพอร์ตี้ button ของ MouseEvent ให้ชัดเจนเพื่อดูว่ามีการตั้งค่าเป็น 0 หรือไม่ โดยแสดงถึงปุ่มหลักเทียบกับอื่นๆ โดย 1 จะแสดงปุ่มกลาง และอื่นๆ แต่ก็มีนักพัฒนาซอฟต์แวร์จำนวนไม่มากที่ตรวจสอบพร็อพเพอร์ตี้ button อย่างชัดเจน ซึ่งส่งผลให้โค้ดที่จัดการ click ทั้งหมดเหมือนกันหมด ไม่ว่าจะกดปุ่มใด
ตั้งแต่ Chrome 55 เป็นต้นไป MouseEvent ประเภทใหม่ที่เรียกว่า auxclick จะเริ่มทำงานเมื่อมีการคลิกที่เกิดจากปุ่มที่ไม่ใช่ปุ่มหลัก เมื่อใช้ร่วมกับเหตุการณ์ใหม่คือการเปลี่ยนแปลงลักษณะการทำงานของเหตุการณ์ click ที่สัมพันธ์กันซึ่งจะเริ่มทำงานเมื่อมีการกดปุ่มหลักของเมาส์เท่านั้น เราหวังว่าการเปลี่ยนแปลงเหล่านี้จะช่วยให้นักพัฒนาเว็บเขียนเครื่องจัดการเหตุการณ์ที่ตอบสนองต่อประเภทการคลิกเฉพาะที่ตนสนใจได้ง่ายขึ้น โดยไม่ต้องตรวจสอบพร็อพเพอร์ตี้ MouseEvent.button โดยเฉพาะ
ลดการตรวจสอบที่ผิดพลาด
อย่างที่ได้กล่าวไปแล้ว แรงจูงใจหนึ่งในการสร้าง auxclick คือเพื่อหลีกเลี่ยงการติดตั้งใช้งานตัวแฮนเดิล click ที่กำหนดเองซึ่งลบล้างลักษณะการทำงาน "คลิกกลาง-เปิด-a-tab" โดยไม่ได้ตั้งใจ ตัวอย่างเช่น สมมติว่าคุณเขียนเครื่องจัดการเหตุการณ์ click ที่ใช้ 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);