Js实现自定义右键行为

本文主要给大家分享的是一则javascript实现的自定义右键行为的小技巧，非常的简单实用，有相同需求的小伙伴可以参考下。

自定义右键行为(通过事件对象获得鼠标的坐标(x,y))

1. <!doctype html> 
2. <html> 
3. <head> 
4. <meta charset="UTF-8"> 
5. <title>demo</title> 
6. <style type="text/css"> 
7. html{ 
8. height:100%; 
9. } 
10. body{ 
11. height:100%; 
12. } 
13. #mydiv{ 
14. width:300px; 
15. height:300px; 
16. background-color: #ff7400; 
17. } 
18. #ctxMenu{ 
19. background-color: #ff7400; 
20. list-style-type: none; 
21. position: absolute; 
22. padding:0px; 
23. border:1px solid #000; 
24. visibility: hidden; 
25. } 
26. </style> 
27. </head> 
28. <body> 
29. <div id="mydiv"></div> 
30. <h2 id="show"></h2> 
31. <input type="text"id="txt"><span id="help"></span> 
32. <ul id="ctxMenu"> 
33. <li>上传</li> 
34. <li>下载</li> 
35. <li>新建</li> 
36. <li>取消</li> 
37. </ul> 
38. <script type="text/javascript"> 
39. var $=function(id){ 
40. return document.getElementById(id); 
41. }; 
42. var h2=$("show"); 
43. var ctx=$("ctxMenu"); 
44. var txt=$("txt"); 
45. var help=$("help"); 
46. /* 
47. txt.onfocus=function(){ 
48. help.innerHTML="请输入金额"; 
49. } 
50. txt.onkeydown=function(event){ 
51. help.innerHTML=""; 
52. var code=event.keyCode; 
53. if(!(code>=48&&code<=57||code>=96&&code<=105||code==46||code==8||code==13||code==37||code==39||code==110||code==190)){ 
54. event.preventDefault(); 
55. } 
56. } 
57. */ 
58. document.body.oncontextmenu=function(event){ 
59. event.preventDefault(); 
60. var x=event.pageX; 
61. var y=event.pageY; 
62. ctx.style.left=x+"px"; 
63. ctx.style.top=y+"px"; 
64. ctx.style.visibility="visible"; 
65. } 
66. document.body.onclick=function(){ 
67. ctx.style.visibility="hidden"; 
68. } 
69. /* 
70. document.body.onmousemove=function(event){ 
71. var x=event.pageX; 
72. var y=event.pageY; 
73. h2.innerHTML=x+":"+y; 
74. } 
75. */ 
76. window.onbeforeunload=function(){ 
77. var v=$("txt").value; 
78. if(v){ 
79. return ""; 
80. } 
81. } 
82. $("mydiv").onclick=function(){ 
83. $("show").innerHTML="click"; 
84. }; 
85. $("mydiv").ondblclick=function(){ 
86. $("show").innerHTML="dblclick"; 
87. }; 
88. $("mydiv").onmouseover=function(){ 
89. $("show").innerHTML="mouseover"; 
90. this.style.backgroundColor="#2d2d2d"; 
91. }; 
92. $("mydiv").onmouseout=function(){ 
93. $("show").innerHTML="mouseout"; 
94. this.style.backgroundColor="pink"; 
95. } 
96. </script> 
97. </body> 
98. </html> 

以上就是本文给大家分享的全部内容了，希望大家能够喜欢。

请您花一点时间将文章分享给您的朋友或者留下评论。我们将会由衷感谢您的支持!