turbotree/youjian.html

## youjian.html
<!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>
	<!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>