Baru-baru ini, ketika saya membuat hal kecil, saya perlu "klik kanan" pada elemen tertentu untuk memicu menu khusus, dan mengedit entri yang diklik kanan melalui menu khusus. Ini membutuhkan memblokir menu klik kanan default
Elemen di bawah IE dan FF memiliki metode OnContextMenu. Di bawah FF, Anda dapat dengan mudah mencapai efek ini dengan menggunakan metode Event.PreventDefault (). IE tidak mendukung metode ini. Di bawah IE, acara default umumnya diblokir dengan memicu metode dan mengembalikan false.
Biasanya, kami menggunakan acara klik kanan untuk memblokir blok global, yaitu klik kanan diblokir pada tingkat dokumen. Sekarang efek yang ingin saya capai adalah untuk hanya memblokir peristiwa klik kanan default di area tertentu, sementara area lain tidak memengaruhinya.
Melalui eksperimen, saya menemukan bahwa jika pengembalian palsu dalam metode terikat di bawah IE dapat mencapai perilaku default memblokir klik kanan pada tingkat dokumen. Namun, jika elemen tertentu seperti DIV tidak valid.
Akhirnya, melalui manual pencarian, saya menemukan bahwa objek acara di bawah IE memiliki properti ReturnValue. Jika properti ini diatur ke false, acara klik kanan default tidak akan dipicu. Mirip dengan yang berikut:
Salinan kode adalah sebagai berikut:
event.returnValue = false;
Cukup tambahkan kalimat ini untuk mencapai efek yang saya inginkan. Kode demo lengkap:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = UTF-8"/> <title> BOKSI TOLEK: TOKS TOMBOK KITIMAN DEMO; Line-Height: 24px; Font-Family: Arial, Helvetica, sans-serif;}#activearea {width: 300px; tinggi: 200px; Latar Belakang:#06C; warna: #fff;}#cstcm {width: 120px; Latar Belakang: #EEE; Perbatasan: 1px solid #ccc; Posisi: Absolute; } #cstcm ul {margin: 0; padding: 0;}#cstcm ul li {List-style: none; padding: 0 10px; kursor: default;}#cstcm ul li: hover {latar belakang:#009; Warna: #ffff;}. Splittop {border-bottom: 1px solid #ccc;}. splitbottom {border-top: 1px solid #fff;} </tyle> <script> function customContextMenu (event) {event.preventDefault? event.preventDefault():(event.returnValue = false);var cstCM = document.getElementById('cstCM');cstCM.style.left = event.clientX + 'px';cstCM.style.top = event.clientY + 'px';cstCM.style.display = 'block';document.onmousedown = clearCustomCM;}function clearCustomCM(){document.getElementById('cstCM').style.display = 'none';document.onmousedown = null;}</script></head><body><div id="cstCM" style="display:none;"><ul><li>View</li><li>Sort Oleh </li> <li> Refresh </li> <li> Tempel </li> <li> Paste Shortcut </li> <li> Properti </li> </ul> </div> <Div ID = "ActiveArea" OnContextMenu = "CustomContextMenu (Event)"> Area menu Kustom </Div> </body> ht ht>Efek ini kompatibel dengan IE6+ dan FF, tetapi Opera sama sekali tidak memiliki metode OnContextMenu, sehingga tidak dapat dengan mudah diimplementasikan melalui metode ini. Untuk mencapainya, cara lain diperlukan.