เจาะลึก CSS pointer-events ตัวช่วยจัดการคลิกทะลุเลเยอร์
ทำความเข้าใจการทำงานของ CSS pointer-events ในการเลือกเป้าหมายอีเวนต์ พร้อมไขข้อเข้าใจผิดเกี่ยวกับการปิดการใช้งานและการเลือกข้อความ
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
- pointer-events: none เปลี่ยนองค์ประกอบเป้าหมายของเคอร์เซอร์ ไม่ใช่การปิดใช้งานอีเวนต์
- การส่งผ่านอีเวนต์ (Event Propagation) ยังคงทำงานตามปกติผ่าน DOM
- คุณสมบัตินี้ไม่ได้ป้องกันการโฟกัสด้วยคีย์บอร์ดหรือการเลือกข้อความ
ในสภาวะปกติเบราว์เซอร์จะเลือกองค์ประกอบที่อยู่ชั้นบนสุดใต้เคอร์เซอร์เสมอ แต่เมื่อกำหนดค่า pointer-events เป็น none เบราว์เซอร์จะข้ามองค์ประกอบนั้นไปและมองหาองค์ประกอบถัดไปที่อยู่ข้างใต้แทน เมื่อมองในมุมนี้ พฤติกรรมส่วนใหญ่ของ pointer-events จึงเริ่มสมเหตุสมผลขึ้น เพราะมันทำหน้าที่เปลี่ยนว่าองค์ประกอบใด (หรือส่วนใดของ SVG) จะกลายเป็นเป้าหมายของอีเวนต์ตั้งแต่แรก แทนที่จะเป็นการปิดการใช้งานอีเวนต์ทั้งหมด
กรณีการใช้งานทั่วไปคือหน้าต่างโมดอล (Modal) นักพัฒนาอาจใช้คอนเทนเนอร์เต็มหน้าจอเพื่อจัดกึ่งกลางโมดอล ซึ่งคอนเทนเนอร์นี้จะบังพื้นที่วิวพอร์ตทั้งหมด หากไม่เปลี่ยนค่า pointer-events มันจะป้องกันไม่ให้อีเวนต์การคลิกไปถึงองค์ประกอบที่อยู่ข้างใต้ การกำหนด pointer-events เป็น none ที่คอนเทนเนอร์จึงช่วยแก้ปัญหานี้ได้ แต่เนื่องจากคุณสมบัตินี้มีการสืบทอดค่า (Inheritance) จึงจำเป็นต้องคืนค่าให้ตัวโมดอลเองด้วยการกำหนด pointer-events เป็น auto
การทำความเข้าใจความแตกต่างระหว่างการเลือกเป้าหมาย (Target Selection) และการส่งผ่านอีเวนต์ (Event Propagation) ถือเป็นหัวใจสำคัญในการใช้งาน CSS ตัวนี้ เนื่องจากตัวคุณสมบัติไม่ได้หยุดการเดินทางของอีเวนต์ผ่าน DOM องค์ประกอบลูกที่อยู่ข้างในยังคงสามารถรับอีเวนต์และเรียกใช้งานตัวรับฟังอีเวนต์ (Event Listener) ขององค์ประกอบแม่ได้ตามปกติผ่านกระบวนการ Capturing และ Bubbling
ข้อควรระวังที่สำคัญคือคุณสมบัตินี้ไม่ได้เป็นการปิดการใช้งานองค์ประกอบอย่างแท้จริง:
- องค์ประกอบยังคงสามารถรับโฟกัสจากแป้นพิมพ์ผ่านปุ่ม Tab ได้
- ผู้ใช้ยังคงสามารถเลือกข้อความภายในองค์ประกอบนั้นได้ เช่น การกดปุ่ม Ctrl/Cmd + A
- หากต้องการปิดการใช้งานฟอร์มเนทีฟควรใช้แอตทริบิวต์ disabled แทน
- หากต้องการซ่อนส่วนของหน้าเว็บไม่ให้มีการโต้ตอบใดๆ รวมถึงการเข้าถึงของโปรแกรมอ่านจอภาพ ควรเลือกใช้แอตทริบิวต์ inert
ที่มา: CSS-Tricks
พบข้อมูลผิดพลาดในบทความนี้? แจ้งปัญหาบทความนี้
ความคิดเห็น
แสดงความคิดเห็น