萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> jquery實現的有選擇性禁用鼠標右鍵

jquery實現的有選擇性禁用鼠標右鍵

jquery實現的有選擇性禁用鼠標右鍵:

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

代碼實例如下:

<!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也可以禁用右鍵菜單了

copyright © 萬盛學電腦網 all rights reserved