遮蔽滑鼠右鍵選單例項程式碼

antzone發表於2017-03-14
單例

有時候某些需求可能要遮蔽右鍵選單，下面就介紹一下使用js如何實現此效果。

核心程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
document.body.oncontextmenu=function(){return false;}

以上程式碼可以禁用body元素中的右鍵選單，原理就是為body註冊oncontextmenu事件處理函式，此函式返回false即可禁用右鍵選單。

關於return false可以參閱javascript中return false的作用是什麼一章節。 

在實際應用，有時候希望在指定的元素內不禁用右鍵選單，而在頁面的其他地方禁用右鍵選單。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" /> 
<title>js禁用滑鼠右鍵-螞蟻部落</title>
<style type="text/css">
ul{list-style:none}
</style>
<script type="text/javascript">
document.oncontextmenu=function(event){
  if(window.event){
    event = window.event;
  }
  try{
    var the=event.srcElement?event.srcElement:event.target;
    if(!((the.tagName=="INPUT"&&the.type.toLowerCase()=="text")||the.tagName=="TEXTAREA")){
      return false;
    }
    return true;
  }
  catch(e){
    return false; 
  } 
}
</script>
</head>
<body>
<div>螞蟻部落歡迎您，希望每一天都能夠有進步</div>
<ul>
  <li><input type="text" value="每一天都是新的"/></li>
  <li><textarea>螞蟻部落歡迎您</textarea></li>
</ul>
</body>
</html>

在以上程式碼中，只有在input text文字框和多行文字框中可以使用右鍵選單，下面簡單介紹一下是是實現過程:

一.實現原理:

為document註冊oncontextmenu事件處理函式，此函式可以判斷時間觸發的源物件是否是input text或者多行文字框，如果是的話，此函式就返回true，否則的話返回false，這樣就實現了在指定的兩種型別元素中可以使用右鍵選單，其他元素中不可以的效果。

二.程式碼註釋:

1.document.oncontextmenu=function(event){}，為document物件註冊oncontextmenu事件處理函式，引數是事件物件。

2.if(window.event){event=window.event},用於相容各個瀏覽器。

3.var the=event.srcElement?event.srcElement:event.target，獲取事件源物件，此種寫法為相容各個瀏覽器。

4.if(!((the.tagName=="INPUT"&&the.type.toLowerCase()=="text")||the.tagName=="TEXTAREA")){return false}，判斷事件源物件不是input text或者textarea就禁用右鍵選單。

三.相關閱讀:

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

2.tagName可以參閱javascript tagName一章節。 

3.toLowerCase()函式可以參閱JavaScript toLowerCase()一章節。

相關文章