自定义右键代码,JS代码库,德仔网

代码语言
代码分类
【JS】自定义右键
作者:Goarulinsman / 发布于2015/4/2/ 687

	<!doctype html>
	<html>
	 <head>
	 <meta charset="UTF-8">
	 <title>demo</title>
	 <style type="text/css">
	
	
	 html{
	
	 height:100%;
	
	 }
	 body{
	
	 height:100%;
	 }
	 #mydiv{
	
	 width:300px;
	 height:300px;
	 background-color: #ff7400;
	 }
	
	 #ctxMenu{
	
	 background-color: #ff7400;
	 list-style-type: none;
	 position: absolute;
	 padding:0px;
	 border:1px solid #000;
	 visibility: hidden;
	
	 }
	
	 </style>
	
	 </head>
	 <body>
	
	 <div id="mydiv"></div>
	 <h2 id="show"></h2>
	
	 <input type="text"id="txt"><span id="help"></span>
	
	
	 <ul id="ctxMenu">
	 <li>上传</li>
	 <li>下载</li>
	 <li>新建</li>
	 <li>取消</li>
	 </ul>
	
	
	
	 <script type="text/javascript">
	
	
	 var $=function(id){
	
	 return document.getElementById(id);
	 };
	
	 var h2=$("show");
	
	 var ctx=$("ctxMenu");
	
	 var txt=$("txt");
	 var help=$("help");
	
	
	 /*
	 txt.onfocus=function(){
	
	 help.innerHTML="请输入金额";
	 }
	 txt.onkeydown=function(event){
	
	 help.innerHTML="";
	
	 var code=event.keyCode;
	 if(!(code>=48&&code<=57||code>=96&&code<=105||code==46||code==8||code==13||code==37||code==39||code==110||code==190)){
	
	 event.preventDefault();
	 }
	
	
	
	
	 }
	
	 */
	
	 document.body.oncontextmenu=function(event){
	
	 event.preventDefault();
	 var x=event.pageX;
	 var y=event.pageY;
	
	 ctx.style.left=x+"px";
	 ctx.style.top=y+"px";
	 ctx.style.visibility="visible";
	
	 }
	
	
	
	 document.body.onclick=function(){
	
	 ctx.style.visibility="hidden";
	 }
	
	
	 /*
	 document.body.onmousemove=function(event){
	
	 var x=event.pageX;
	 var y=event.pageY;
	
	 h2.innerHTML=x+":"+y;
	
	 }
	 */
	
	
	 window.onbeforeunload=function(){
	
	 var v=$("txt").value;
	 if(v){
	
	 return "";
	 }
	
	 }
	
	
	
	
	
	
	
	
	 $("mydiv").onclick=function(){
	
	 $("show").innerHTML="click";
	 };
	
	 $("mydiv").ondblclick=function(){
	
	
	 $("show").innerHTML="dblclick";
	 };
	
	 $("mydiv").onmouseover=function(){
	
	 $("show").innerHTML="mouseover";
	 this.style.backgroundColor="#2d2d2d";
	
	 };
	
	 $("mydiv").onmouseout=function(){
	
	 $("show").innerHTML="mouseout";
	 this.style.backgroundColor="pink";
	 }
	
	
	
	
	 </script>
	
	
	
	 </body>
	</html>
试试其它关键字
　自定义右键　
同语言下
可能有用的
Goarulinsman贡献的其它代码(5)