首頁 > web前端 > js教程 > jquery實現人性化的選擇性停用滑鼠右鍵_jquery

jquery實現人性化的選擇性停用滑鼠右鍵_jquery

WBOY
發布: 2016-05-16 16:42:47
原創
1407 人瀏覽過

使用比較暴力的手段停用滑鼠右鍵是不人性化的,所以最好還是有選擇性的停用滑鼠右鍵。

程式碼實例如下:

<!DOCTYPE html> <html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.45it.com/" /> 
<title>脚本之家</title> 
<style type="text/css">
html,body{height:100%}
div{
width:150px;
height:50px;
background:#CCC;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
function jQuery_isTagName(ev,arr){
ev=$.event.fix(ev);
var target=ev.target||ev.srcElement;
if(arr&&$.inArray(target.tagName.toString().toUpperCase(),arr)==-1){
return false;
}
return true;
}

$(document).bind("contextmenu",function(ev){
if(!jQuery_isTagName(ev,['INPUT','TEXTAREA'])){
ev.preventDefault();
return false;
}
return true;
})
})
</script> 
</head> 
<body>
<div id="thediv"></div> 
<textarea></textarea>
</body> 
</html>
登入後複製

上面的程式碼實現了我們的要求,以下對程式碼的實作過程做一下介紹。

程式碼註解:

1.$(document).ready(function(){}),當文字結構完全載入完畢再去執行函數中的程式碼。
2.function jQuery_isTagName(ev,arr){},此函數可以判斷元素是否在可以使用右鍵選單之列,第一個參數是事件對象,第二個參數是一個數組,數組元素是可以使用右鍵選單的標籤名稱。
3.ev=$.event.fix(ev),實作事件物件在各個瀏覽器的兼容性,fix()函數是jquery內部使用的,當然也可以這麼用。
4.var target=ev.target||ev.srcElement,取得事件來源物件。
5.if(arr&&$.inArray(target.tagName.toString().toUpperCase(),arr)==-1){return false;},判斷指定的標籤元素是否在陣列中,如果陣列中沒有指定的標籤,那麼就回傳false。
6.return true,回傳true。
8.$(document).bind("contextmenu",function(ev){}),為document文件註冊contextmenu事件處理函數。
9.if(!jQuery_isTagName(ev,['INPUT','TEXTAREA'])){
ev.preventDefault();
return false;
}
如果如果指定標籤不在可以使用右鍵選單的清單中,那麼就使用ev.preventDefault()阻止事件冒泡,這很重要,否則的話如果有元素嵌套,雖然子元素禁用了右鍵選單,但是右鍵子元素的時候,還是會彈出右鍵選單,因為事件傳遞到父元素上去了,return false也可以停用右鍵選單了

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板