实现点击鼠标右键获取菜单栏

TNT，cnd 2019-01-18 09:29:46

开发工具与关键技术：Visual Studio2015 javascript
作者：华境聪
撰写时间：2019/1/18

为了能在浏览器上，实现点击鼠标右键，获取菜单栏目，所做出的效果。
首先，利用浏览器自动加载触发 “window.onload”方法，获取“p”标签的ID，给“p”标签的鼠标右键事件，触发弹窗的显示以及关闭浏览器右键菜单。

以及输出的截图：

1.	@{  

2.	    Layout = null;  

3.	}  

4.	  

5.	<!DOCTYPE html>  

6.	  

7.	<html>  

8.	<head>  

9.	    <style>  

10.	        li{  

11.	            list-style-type:none;  

12.	            padding-top:10px;  

13.	        }  

14.	    </style>  

15.	    <script type="text/javascript">   

16.	  

17.	        window.onload = function () { //页面加载完成后触发  

18.	            var table = document.getElementById('table1');  

19.	            table.oncontextmenu = function () {//oncontextmenu：限于鼠标右键  

20.	                document.getElementById('xianshi').style.display = 'block';  

21.	                return false;//禁用浏览器右键菜单  

22.	            }  

23.	        }  

24.	        function quxiao() {  

25.	            document.getElementById('xianshi').style.display = 'none';  

26.	        }  

27.	    </script>  

28.	</head>  

29.	<body >  

30.	    <p  id="table1">点击鼠标右键可以获得菜单。</p>  

31.	  <div style="background-color:#f6e3e3;display:none;width:100px;position:relative;left:74px;top:-14px;" id="xianshi">  

32.	    <ul >  

33.	    <li>显示1</li>  

34.	    <li>显示2</li>  

35.	    <li>显示3</li>  

36.	    <li>显示4</li>  

37.	    <li>显示5</li>  

38.	      </ul>  

39.	      <button style="margin-left: 54px;" onclick="quxiao()">取消</button>  

40.	  </div>  

41.	          

42.	      

43.	</body>  

44.	</html>