CSS pointer-events กำหนดให้ div คลิกไม่ได้

<h3>CSS pointer-events กำหนดให้ div คลิกไม่ได้<&sol;h3>&NewLine;<p>สำหรับคนที่พัฒนา Web Application และ HTML5 Game ที่ต้องมีการคลิกปุ่มต่าง ๆ ภายในเว็บไซต์อยู่หลายจุด<br &sol;>&NewLine;div หรือ html element ต่าง ๆ เต็มหน้าเว็บเพจไปหมด อาจจะเคยเจอปัญหาเรื่องของการกำหนดพื้นที่การคลิก<br &sol;>&NewLine;เพราะบางทีอาจจะมี div บางตัวมาทับ div ที่เราอยากให้คลิกได้ทำให้พื้นที่การคลิกและการทำงานของโปรแกรมผิดพลาด<br &sol;>&NewLine;เราสามารถใช้คำสั่ง pointer-events เพื่อ disable div ที่ไม่ต้องการให้รับ events จาก mouse ได้<br &sol;>&NewLine;<&excl;--more--><&sol;p>&NewLine;<p><strong>CSS หรือที่ย่อมาจากคำว่า Cascading Style Sheets<&sol;strong> มีคำสั่งอยู่คำสั่งหนึ่งที่บังคับไม่ให้เกิด events ใด ๆ<br &sol;>&NewLine;เมื่อมีการคลิกที่ div นั้น ๆ คือคำสั่ง pointer-events&colon;none อาจจะมีอยู่หลายเหตุผลที่เราต้องการไม่ให้<br &sol;>&NewLine;div นั้นคลิกได้หรืออาจจะมี div บางตัวที่บดบัง div ที่เราต้องการให้คลิกได้ เราสามารถใช้คำสั่ง pointer-events<br &sol;>&NewLine;เพื่อกำหนดให้ div นั้น ๆ ไม่ทำงานเมื่อมีเหตุการณ์ click<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h4>ตัวอย่างการใช้งาน<&sol;h4>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true ">&period;avoid-clicks &lbrace; &NewLine; pointer-events&colon; none&semi; &NewLine;&rcub; &NewLine;<&sol;pre>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h4>property values ของ pointer-events<&sol;h4>&NewLine;<ul>&NewLine;<li><strong>none<&sol;strong> ป้องกันไม่ให้เกิดการคลิกใด ๆ และไม่แสดง mouse cursor<&sol;li>&NewLine;<li><strong>auto<&sol;strong> เริ่มต้นการทำงานใหม่ของคำสั่ง pointer-events คือเปลี่ยนเป็นคลิกได้นั่นเอง<&sol;li>&NewLine;<li><strong>inherit<&sol;strong> กำหนดรูปแบบตาม element ที่ครอบตัวเองอยู่ จะคลิกได้หรือไม่ได้ขึ้นอยู่กับ element ที่ครอบตัวเองอยู่<&sol;li>&NewLine;<&sol;ul>&NewLine;<p>ถ้าเราพัฒนา Web Application ซึ่งมีปุ่มหรือลิ้งอยู่มาก และต้อง interactive กับ user หลาย ๆ จุด<br &sol;>&NewLine;คำสั่ง pointer-events เป็นคำสั่ง css ที่ใช้งานค่อนข้างบ่อย<&sol;p>&NewLine;