jquery實現(xiàn)人性化的有選擇性禁用鼠標(biāo)右鍵
使用比較暴力的手段禁用鼠標(biāo)右鍵是不人性化的,所以最好還是有選擇性的禁用鼠標(biāo)右鍵。
代碼實例如下:
<!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>
上面的代碼實現(xiàn)了我們的要求,下面對代碼的實現(xiàn)過程做一下介紹。
代碼注釋:
1.$(document).ready(function(){}),當(dāng)文本結(jié)構(gòu)完全加載完畢再去執(zhí)行函數(shù)中的代碼。
2.function jQuery_isTagName(ev,arr){},此函數(shù)可以判斷元素是否在可以使用右鍵菜單之列,第一個參數(shù)是事件對象,第二個參數(shù)是一個數(shù)組,數(shù)組元素是可以使用右鍵菜單的標(biāo)簽名稱。
3.ev=$.event.fix(ev),實現(xiàn)事件對象在各個瀏覽器的兼容性,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()阻止事件冒泡,這很重要,否則的話如果有元素嵌套,雖然子元素禁用了右鍵菜單,但是右鍵子元素的時候,還是會彈出右鍵菜單,因為事件傳遞到父元素上去了,return false也可以禁用右鍵菜單了
相關(guān)文章
快速移動鼠標(biāo)觸發(fā)問題及解決方法(ECharts外部調(diào)用保存為圖片操作及工作流接線mouseenter和mouseleav
這篇文章主要介紹了快速移動鼠標(biāo)所觸發(fā)的問題及解決方法(ECharts外部調(diào)用保存為圖片操作及工作流接線mouseenter和mouseleave),非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-08-08jQuery控制圖片的hover效果(smartRollover.js)
圖片的hover效果可以用css來實現(xiàn)也可以用js來實現(xiàn)。典型的就是smartRollover.js2012-03-03基于jquery點擊自以外任意處,關(guān)閉自身的代碼
主要功能是點擊顯示,然后通過點擊頁面的任意位置都能關(guān)閉顯示效果,主要是$(document).click的作用2012-02-02jQueryUI 拖放排序遇到滾動條時有可能無法執(zhí)行排序的小bug及解決方案
前些日子不是在做使用Jquery-UI實現(xiàn)一次拖拽多個選中的元素操作嘛,在持續(xù)完善這個組件時遇到了一個關(guān)于拖放排序的bug。今天就著圖片和代碼重現(xiàn)一下,也順便告訴大家如何解決這個問題2016-12-12