เมื่อเร็ว ๆ นี้เมื่อฉันทำเรื่องเล็ก ๆ น้อย ๆ ฉันต้อง "คลิกขวา" ในองค์ประกอบเพื่อทริกเกอร์เมนูที่กำหนดเองและแก้ไขรายการคลิกขวาผ่านเมนูที่กำหนดเอง สิ่งนี้ต้องปิดกั้นเมนูคลิกขวาเริ่มต้น
องค์ประกอบด้านล่าง IE และ FF มีวิธี OnContextMenu ภายใต้ FF คุณสามารถบรรลุเอฟเฟกต์นี้ได้อย่างง่ายดายโดยใช้เมธอด preventDefault () คือไม่สนับสนุนวิธีนี้ ภายใต้ IE เหตุการณ์เริ่มต้นโดยทั่วไปจะถูกบล็อกโดยทริกเกอร์วิธีการและส่งคืนเท็จ
โดยปกติแล้วเราใช้เหตุการณ์คลิกขวาเพื่อบล็อกบล็อกทั่วโลกนั่นคือคลิกขวาที่ระดับเอกสาร ตอนนี้เอฟเฟกต์ที่ฉันต้องการบรรลุคือการบล็อกเหตุการณ์คลิกขวาเริ่มต้นในพื้นที่เฉพาะในขณะที่พื้นที่อื่น ๆ ไม่ส่งผลกระทบต่อมัน
จากการทดลองฉันพบว่าหากการส่งคืนเท็จในวิธีที่ถูกผูกไว้ภายใต้ IE สามารถบรรลุพฤติกรรมเริ่มต้นของการปิดกั้นคลิกขวาในระดับเอกสาร อย่างไรก็ตามหากองค์ประกอบเฉพาะเช่น div ไม่ถูกต้อง
ในที่สุดผ่านคู่มือการค้นหาฉันพบว่าวัตถุเหตุการณ์ภายใต้ IE มีคุณสมบัติ ReturnValue หากคุณสมบัตินี้ถูกตั้งค่าเป็นเท็จเหตุการณ์คลิกขวาเริ่มต้นจะไม่ถูกเรียกใช้ คล้ายกับต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
Event.ReturnValue = FALSE;
เพียงเพิ่มประโยคนี้เพื่อให้ได้เอฟเฟกต์ที่ฉันต้องการ รหัสสาธิตที่สมบูรณ์:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "ข้อความ/html; charset = utf-8"/> <title> บล็อกปุ่มเริ่มต้นของเมาส์ ความสูงของสาย: 24px; Font-Family: Arial, Helvetica, Sans-Serif;}#ActivEarea {Width: 300px; ความสูง: 200px; ความเป็นมา:#06C; สี: #fff;}#cstcm {width: 120px; ความเป็นมา: #eee; ชายแดน: 1px Solid #CCC; ตำแหน่ง: สัมบูรณ์; } #cstcm ul {margin: 0; Padding: 0;}#cstcm ul li {list-style: none; Padding: 0 10px; เคอร์เซอร์: ค่าเริ่มต้น;}#cstcm ul li: โฮเวอร์ {พื้นหลัง:#009; สี: #ffff;}. Splittop {border-bottom: 1px solid #ccc;}. splitbottom {border-top: 1px solid #fff;} </style> <script> ฟังก์ชั่น CustomContextMenu (เหตุการณ์) {event.preventDefault? Event.preventDefault () :( Event.ReturnValue = FALSE); var cstcm = document.getElementById ('cstcm'); cstcm.style.left = event.clientx + 'px'; cstcm.style.top = event.clienty + 'px'; clearcustomcm;} ฟังก์ชั่น clearcustomcm () {document.getElementById ('cstcm'). style.display = 'none'; document.onmousedown = null;} </script> </head> <body> โดย </li> <li> Refresh </li> <li> วาง </li> <li> วางลัด </li> <li> คุณสมบัติ </li> </ul> </div> <div id = "ActivEarea" OnContextMenu = "CustomContextMenu (เหตุการณ์)"เอฟเฟกต์นี้เข้ากันได้กับ IE6+ และ FF แต่ Opera ไม่มีวิธี OnContextMenu เลยดังนั้นจึงไม่สามารถนำไปใช้กับวิธีนี้ได้อย่างง่ายดาย เพื่อให้บรรลุมันจำเป็นต้องมีวิธีการอื่น