javascript實作在某個元素上阻止滑鼠右鍵事件的方法和實例_javascript技巧
- WBOY原創
- 2016-05-16 16:39:491811瀏覽
最近在做一個小東西的時候需要在某一個元素上「右鍵」觸發一個自訂選單，透過自訂的選單對右鍵的條目進行編輯。這就要求屏蔽預設的右鍵選單
IE和FF下面的元素都有oncontextmenu這個方法，在FF下面只要透過event.preventDefault()方法就可以輕鬆實現這個效果。 IE並不支援這個方法，在IE下面一般是透過觸發方法後return false來實現阻止預設事件的。
通常我們使用阻止右鍵事件是在全域阻止，即在document層面就將右鍵攔截，現在我想要實現的效果是只在特定的區域阻止預設的右鍵事件，而其他區域並不影響。
透過實驗我發現要是在IE下綁定的方法中return false後在document層面上可以實現阻止右鍵的預設行為。但是具體到某一個元素比如div，則失效。
最後透過查找手冊發現，IE下的event物件有一個returnValue屬性，如果將這個屬性設為false則不會觸發預設的右鍵事件。類似如下：
複製程式碼 程式碼如下:
event.returnValue = false;
只要加入這句話就實現了我想要的效果。完整Demo代碼：
<!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 ? 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>
這個效果相容於IE6 ，FF，但是opera壓根就沒有oncontextmenu這個方法所以也就不能簡單的透過這個方法實現，要想實現還需要透過其他的手段。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn