แต่บางครั้งเราประสบปัญหาดังกล่าว เราต้องการห้ามผู้เยี่ยมชมใช้เมนูคลิกขวาหรือบล็อกฟังก์ชันบางอย่างของเมนูคลิกขวา ตัวอย่างเช่น เพื่อปกป้องเนื้อหาของหน้าเว็บ เราไม่ต้องการให้ผู้เยี่ยมชม เพื่อดูซอร์สโค้ดของหน้าเว็บผ่านเมนูคลิกขวา เราไม่ต้องการให้พวกเขาเลือก คัดลอก ฯลฯ เนื้อหาเว็บด้วยการคลิกขวา เมื่อพิจารณาถึงปัญหานี้ นักออกแบบเว็บไซต์จำนวนมากเพียงแต่บล็อกการคลิกขวา แทนที่จะทำเช่นนี้ เราอาจใช้สคริปต์เพื่อใช้เมนูคลิกขวาที่มีสไตล์และเพิ่มลงในโหลดเนื้อหาของเราเองลงในเมนูคลิกขวานี้ เรามาลองใช้ไอเดียนี้กันตอนนี้เลย
สิ่งแรกที่เราต้องพิจารณาคือการเรียกใช้ฟังก์ชันผ่านการคลิกขวาของเมาส์ ฟังก์ชันนี้ใช้เพื่อแสดงเนื้อหาของเมนูคลิกขวาใหม่ เรารู้ว่าเหตุการณ์การคลิกขวาของเมาส์ถูกเรียกผ่าน document.oncontextmenu ถ้าเรากำหนด document.oncontextmenu = ฟังก์ชันบางอย่าง เราสามารถเรียกเมนูคลิกขวาใหม่ได้ คำถามสำคัญคือจะควบคุมเมนูผ่านสิ่งนี้ได้อย่างไร ฟังก์ชัน ในเวลาเดียวกัน เมนูจะต้องถูกซ่อนผ่านเอกสารเหตุการณ์การคลิกของแบบฟอร์ม (โดยทั่วไปหมายถึงการคลิกซ้าย) กระบวนการนี้จะทำให้ป๊อปอัปและซ่อนเมนูคลิกขวาเสร็จสมบูรณ์
ก่อนอื่น มาดูโค้ดสคริปต์นี้:
/*Initialization*/
<script language="JavaScript1.2">
/*หากเบราว์เซอร์ปัจจุบันคือ Internet Explorer จะทำให้ document.all คืนค่าเป็นจริง*/
if (document.all && window.print) {
/*เลือกรูปแบบการแสดงผลของกล่องเมนู*/
ie5menu.className = menuskin;
/*ขั้นตอนการประมวลผลการเปลี่ยนเส้นทางเหตุการณ์ปุ่มเมาส์ขวาคือโปรแกรมที่กำหนดเอง showmenuie5*/
document.oncontextmenu = showmenuie5;
/*ขั้นตอนการประมวลผลการเปลี่ยนเส้นทางเหตุการณ์ปุ่มเมาส์ซ้ายคือโปรแกรมที่กำหนดเอง Hidemenuie5*/
document.body.onclick = Hidemenuie5;
-
</script>
โดยทั่วไป เหตุการณ์ปุ่มเมาส์ขวาจะเกิดขึ้นหลังจากโหลดเพจแล้ว ดังนั้นเพื่อไม่ให้ส่งผลกระทบต่อความเร็วในการโหลดของเพจ เราจึงสามารถใส่โค้ดนี้ไว้ที่ส่วนท้ายของเพจได้ รหัสนี้ง่ายมาก ก่อนอื่นให้ตรวจสอบว่าเป็นเบราว์เซอร์ IE หรือไม่ หากเป็นเช่นนั้น คำจำกัดความต่อไปนี้ควรจะถูกต้อง กล่าวคือ เมื่อตรวจพบว่าเบราว์เซอร์ที่ไคลเอ็นต์ใช้คือ IE ฟังก์ชัน showmenuie5 จะถูกเรียกเมื่อผู้ใช้สร้างเหตุการณ์คลิกขวา และฟังก์ชัน Hidemenuie5 จะถูกเรียกเมื่อผู้ใช้สร้างเหตุการณ์คลิกซ้าย
หลังจากแก้ไขปัญหาข้างต้นแล้ว ตอนนี้เราต้องพิจารณาวิธีการแสดงและซ่อนเมนูผ่านฟังก์ชัน showmenuie5 และฟังก์ชัน Hidemenuie5 แน่นอนว่าเมนูที่นี่ไม่ใช่เมนูคลิกขวาจริงๆ แต่เป็น div ที่เราสร้างขึ้นเอง และเราใส่สิ่งที่เราต้องการใส่ลงใน div นี้ เรียกใช้ฟังก์ชันผ่านเหตุการณ์ของเมาส์เพื่อควบคุมการมองเห็น ซึ่งให้ผลเช่นเดียวกับการใช้ปุ่มเมาส์ขวา