快捷導(dǎo)航

jquery實(shí)現(xiàn)人性化的有選擇性禁用鼠標(biāo)右鍵

更新時(shí)間：2014年06月30日 16:00:46 投稿：whsnow

與其使用比較暴力的手段禁用鼠標(biāo)右鍵，還不如有選擇性人性化的的禁用鼠標(biāo)右鍵,需要的朋友可以參考下

使用比較暴力的手段禁用鼠標(biāo)右鍵是不人性化的，所以最好還是有選擇性的禁用鼠標(biāo)右鍵。

代碼實(shí)例如下:

<!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>

上面的代碼實(shí)現(xiàn)了我們的要求，下面對代碼的實(shí)現(xiàn)過程做一下介紹。

代碼注釋:

1.$(document).ready(function(){})，當(dāng)文本結(jié)構(gòu)完全加載完畢再去執(zhí)行函數(shù)中的代碼。
2.function jQuery_isTagName(ev,arr){},此函數(shù)可以判斷元素是否在可以使用右鍵菜單之列，第一個(gè)參數(shù)是事件對象，第二個(gè)參數(shù)是一個(gè)數(shù)組，數(shù)組元素是可以使用右鍵菜單的標(biāo)簽名稱。
3.ev=$.event.fix(ev)，實(shí)現(xiàn)事件對象在各個(gè)瀏覽器的兼容性，fix()函數(shù)是jquery內(nèi)部使用的，當(dāng)然也可以這么用。
4.var target=ev.target||ev.srcElement，獲取事件源對象。
5.if(arr&&$.inArray(target.tagName.toString().toUpperCase(),arr)==-1){return false;}，判斷指定的標(biāo)簽元素是否在數(shù)組中，如果數(shù)組中沒有指定的標(biāo)簽，那么就返回false。
6.return true，返回true。
8.$(document).bind("contextmenu",function(ev){})，為document文檔注冊contextmenu事件處理函數(shù)。
9.if(!jQuery_isTagName(ev,['INPUT','TEXTAREA'])){
ev.preventDefault();
return false;
}
如果如果指定標(biāo)簽不在可以使用右鍵菜單的列表中，那么就使用ev.preventDefault()阻止事件冒泡，這很重要，否則的話如果有元素嵌套，雖然子元素禁用了右鍵菜單，但是右鍵子元素的時(shí)候，還是會彈出右鍵菜單，因?yàn)槭录鬟f到父元素上去了，return false也可以禁用右鍵菜單了

您可能感興趣的文章:

相關(guān)文章

jQuery實(shí)現(xiàn)美觀的多級動(dòng)畫效果菜單代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)多級動(dòng)畫效果菜單代碼,涉及jquery針對頁面元素的遍歷及事件綁定操作頁面元素樣式變換的技巧,界面美觀實(shí)用,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-09-09
jQuery的animate函數(shù)實(shí)現(xiàn)圖文切換動(dòng)畫效果
animate()在jquery中作為一個(gè)方法,可用于創(chuàng)建動(dòng)畫效果，jquery中的animate()方法讓那個(gè)頁面增加了很好的視覺效果
2015-05-05
jQuery插件scroll實(shí)現(xiàn)無縫滾動(dòng)效果
今天給大家分享一款頁面無縫滾動(dòng)的jquery.scroll插件。支持上下左右，淡入淡出，滾動(dòng)時(shí)間設(shè)置，動(dòng)畫時(shí)間設(shè)置，鼠標(biāo)經(jīng)過是否停止設(shè)置，滾動(dòng)鼠標(biāo)液動(dòng)條看下頁面的切換效果。該插件適用瀏覽器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。
2015-04-04
JQery jstree 大數(shù)據(jù)量問題解決方法
Jquery 結(jié)合jstree 動(dòng)態(tài)生成一棵樹，如果某一節(jié)點(diǎn)下目錄超過500個(gè)，IE 會提示是否允許JS腳本運(yùn)行，并且目錄加載不全，大約只加載了300左右。
2010-03-03
jquery中ajax請求后臺數(shù)據(jù)成功后既不執(zhí)行success也不執(zhí)行error的完美解決方法
這篇文章主要介紹了jquery中ajax請求后臺數(shù)據(jù)成功后既不執(zhí)行success也不執(zhí)行error解決方法,需要的朋友可以參考下
2017-12-12
基于jquery實(shí)現(xiàn)的服務(wù)器驗(yàn)證控件的啟用和禁用代碼
用戶點(diǎn)擊下一步時(shí)，不對Display=none的新增區(qū)域表單進(jìn)行驗(yàn)證，需要在用戶點(diǎn)擊“取消增加時(shí)”，禁用服務(wù)器驗(yàn)證控件。反之，啟用服務(wù)器驗(yàn)證控件。
2010-04-04
Jquery滑動(dòng)門/tab切換實(shí)現(xiàn)方法完整示例
這篇文章主要介紹了Jquery滑動(dòng)門/tab切換實(shí)現(xiàn)方法,結(jié)合完整實(shí)例形式分析了Jquery滑動(dòng)門/tab切換具體操作技巧與頁面元素動(dòng)態(tài)操作實(shí)現(xiàn)方法,需要的朋友可以參考下
2020-06-06
JQuery模板插件 jquery.tmpl 動(dòng)態(tài)ajax擴(kuò)展
在上一篇JQuery模板插件-jquery.tmpl中介紹了這款插件。有時(shí)我們需要去動(dòng)態(tài)的ajax去加載模板，或者數(shù)據(jù)，根據(jù)url參數(shù)或者其他信息加載不同的模板，數(shù)據(jù)
2011-11-11
jQuery lazyload 的重復(fù)加載錯(cuò)誤以及修復(fù)方法
jQuery lazyload是一款延遲加載圖片的的插件，原意是按需加載，當(dāng)圖片出現(xiàn)在可視區(qū)域時(shí)進(jìn)行加載，但是官方的插件經(jīng)過firebug的檢測可知，并不能節(jié)省流量開支，反而有重復(fù)加載的現(xiàn)象。
2010-11-11
jquery實(shí)現(xiàn)滑動(dòng)樓梯效果
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)滑動(dòng)樓梯效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09