Kaedah dan contoh javascript untuk menghalang peristiwa butang tetikus kanan pada kemahiran element

Kaedah dan contoh javascript untuk menghalang peristiwa butang tetikus kanan pada kemahiran element_javascript

WBOY

Lepaskan： 2016-05-16 16:39:49

asal

1839 orang telah melayarinya

Apabila saya sedang mengusahakan perkara kecil baru-baru ini, saya perlu "klik kanan" pada elemen untuk mencetuskan menu tersuai dan mengedit item yang diklik kanan melalui menu tersuai. Ini memerlukan menyekat menu klik kanan lalai

Elemen di bawah IE dan FF mempunyai kaedah oncontextmenu Di bawah FF, kesan ini boleh dicapai dengan mudah melalui kaedah event.preventDefault(). IE tidak menyokong kaedah ini Di bawah IE, acara lalai biasanya disekat dengan mengembalikan palsu selepas mencetuskan kaedah.

Biasanya apabila kami menyekat acara klik kanan, kami menyekatnya secara global, iaitu memintas acara klik kanan pada peringkat dokumen Sekarang kesan yang saya ingin capai ialah menyekat acara klik kanan lalai hanya di kawasan tertentu , manakala kawasan lain tidak terjejas.

Melalui percubaan, saya mendapati bahawa jika anda mengembalikan palsu dalam kaedah pengikatan di bawah IE, tingkah laku lalai menghalang klik kanan boleh dicapai pada peringkat dokumen. Tetapi apabila ia datang kepada elemen tertentu seperti div, ia tidak berfungsi.

Akhir sekali, dengan mencari manual, saya mendapati bahawa objek acara di bawah IE mempunyai atribut returnValue Jika atribut ini ditetapkan kepada palsu, acara klik kanan lalai tidak akan dicetuskan. Sesuatu seperti ini:

Salin kod Kod adalah seperti berikut:

event.returnValue = palsu;

Hanya menambah ayat ini akan mencapai kesan yang saya mahukan. Kod Demo lengkap:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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>在某个元素上阻止鼠标右键默认事件DEMO</title>
<style>
body{font-size:12px; line-height:24px; font-family:Arial, Helvetica, sans-serif;}
#activeArea{width:300px;height:200px; background:#06C; color:#fff;}
#cstCM{ width:120px; background:#eee; border:1px solid #ccc; position:absolute; }
#cstCM ul{margin:0; padding:0;}
#cstCM ul li{ list-style:none;padding:0 10px; cursor:default;}
#cstCM ul li:hover{ background:#009; color:#fff;}
.splitTop{ border-bottom:1px solid #ccc;}
.splitBottom{border-top:1px solid #fff;}
</style>
<script>
function customContextMenu(event){
	event.preventDefault &#63; 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 By</li>
		<li class="splitTop">Refresh</li>
		<li class="splitBottom">Paste</li>
		<li class="splitTop">Paste Shortcut</li>
		<li class="splitBottom">Property</li>
	</ul>
</div>
<div id="activeArea" oncontextmenu = "customContextMenu(event)">
	Custom Context Menu Area
</div>
</body>
</html>

Salin selepas log masuk

Kesan ini serasi dengan IE6 dan FF, tetapi Opera tidak mempunyai kaedah oncontextmenu sama sekali, jadi ia tidak boleh dicapai dengan mudah melalui kaedah ini untuk mencapainya, cara lain diperlukan.