js如何對標籤有選擇性的禁用滑鼠右鍵

螞蟻小編發表於2017-03-26
JS

禁止滑鼠右鍵效果在不少網站都有使用，當然這是因為很多站長不想瀏覽者複製黏貼頁面的內容，當然這種效果也確實能夠防止一些小白的操作，但是很多禁止滑鼠右鍵的效果過於粗暴，整個頁面中的任何地方都無法使用右鍵，但是往往很多元素對於右鍵操作還是重要的，比如textarea文字框或者input文字框，下面就通過例項程式碼介紹一下如何實現有選擇性的禁止滑鼠右鍵效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
html,body{height:100%}
div{
  width:150px;
  height:50px;
  background:#CCC;
}
</style>
<script type="text/javascript"> 
var isTagName=function(ev,arr){
  var ev=ev||window.event;
  var target=ev.target||ev.srcElement;
  Array.prototype.contains=function(elem){
    for(var index in this){
      if(this[index].toString().toUpperCase()==elem.toString().toUpperCase()) 
      return true;
    }
    return false;
  }
  if(arr&&!arr.contains(target.tagName)){
    return false;
  }
  return true;
}
 
window.onload=function(){
  document.body.oncontextmenu=function(e){
    return isTagName(e,['input','TEXTAREA']);
  }
}
</script> 
</head> 
<body>
<div></div> 
<textarea></textarea>
</body> 
</html>

上面的程式碼實現了我們的要求，只能在input元素和textarea元素中使用滑鼠右鍵，下面介紹一下它的實現過程。

一.程式碼註釋:

1.var isTagName=function(ev,arr){}，宣告一個函式可以實現有選擇性禁用右鍵選單效果，第一個引數是事件物件，第二個引數是由可以使用右鍵選單的標籤名稱組成。

2.var ev=ev||window.event，事件物件實現相容性效果。

3.var target=ev.target||ev.srcElement，獲取事件源物件，這裡也是採用了相容性寫法。

4.Array.prototype.contains=function(elem){}，為Array陣列物件，新增例項函式contains()，此函式能夠判斷當前元素是否在可以使用右鍵選單的元素之內，引數是一個標籤名稱。

5.for(var index in this)，遍歷陣列中的每一個屬性，其實就是陣列中的元素，當然也包括陣列中的自定義屬性，其實最好還是用陣列的length屬性進行遍歷的。

6.if(this[index].toString().toUpperCase()==elem.toString().toUpperCase())，判斷傳遞的標籤是否在陣列中。

7.return true，如果在就返回true。

8.return false，否則返回false。

9.if(arr&&!arr.contains(target.tagName)){return false;}，如果傳遞了陣列，並且陣列中不包含指定的標籤，那麼返回false。

10.return true，否則返回true。

11.window.onload=function(){}，文件完全載入完畢再去執行函式中的程式碼。

12.document.body.oncontextmenu=function(e){return isTagName(e,['input','TEXTAREA']);}，註冊右鍵選單事件。

二.相關閱讀:

1.var ev=ev||window.event可以參閱var ev=window.event||ev的作用是什麼一章節。 

2.target可以參閱javascript event.target一章節。 

3.srcElement可以參閱javascript event.srcElement一章節。

4.prototype屬性可以參閱javascript prototype原型一章節。 

5.toUpperCase()函式可以參閱JavaScript toUpperCase()一章節。

相關文章