js事件中级（默认行为、右击菜单、只输入数字的文本框、拖拽）

最新推荐文章于 2021-06-01 10:16:04 发布

柏油

最新推荐文章于 2021-06-01 10:16:04 发布

阅读量317

点赞数

分类专栏： # JAVA WEB

本文链接：https://blog.csdn.net/ldw201510803006/article/details/75194957

版权

JAVA WEB 专栏收录该内容

59 篇文章 3 订阅

订阅专栏

案例1：右击菜单（解决默认行为）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{margin: 0px;padding: 0px;list-style: none;}
			#div1{height: 100px;width: 40px;background: grey;position: absolute;display: none;}
		</style>
		<script>
			window.oncontextmenu = function(ev){
				var oDiv = document.getElementById("div1");
				
				var oEvent = ev||event;
				oDiv.style.left = oEvent.clientX + 'px';
				oDiv.style.top = oEvent.clientY + 'px';
				oDiv.style.display = 'block';
				return false; //取消默认行为
			}
			
			window.onclick = function(){
				var oDiv = document.getElementById("div1");
				oDiv.style.display = 'none';
			}
		</script>
	</head>
	<body>
		<div id = "div1">
			<ul>
				<li>111</li>
				<li>222</li>
				<li>333</li>
				<li>444</li>
			</ul>
		</div>
	</body>
</html>

案例2：只输入数字的文本框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onkeydown = function(ev){
				var oTxt = document.getElementById("txt1");
				
				var oEvent = ev || event ;
				//是数字并且不是退格
				if(oEvent.keyCode != 8 && oEvent.keyCode != 37 && oEvent.keyCode != 39 && 
					oEvent.keyCode < 48 || oEvent.keyCode > 57)
				return false; //取消默认行为
			}
		</script>
	</head>
	<body>
		<input type = "text" id ='txt1'/>
	</body>
</html>

案例3：拖拽

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#div1 {height: 200px;width: 200px;background: red;position: absolute;}
		</style>
		<script>
			window.onclick = function(){
				var oDiv = document.getElementById("div1");
				
				oDiv.onmousedown = function(ev){
					var oEvent = ev || event;
					
					var disX = oEvent.clientX - oDiv.offsetLeft;
					var disY= oEvent.clientY - oDiv.offsetTop;
					
					//这里不能用oDiv，因为宽度小，当鼠标移出时就会失去效果
					document.onmousemove = function(ev){
						var oEvent = ev || event;
						var x = oEvent.clientX - disX;
						var y = oEvent.clientY - disY;
						
						//解决div跑出界面的情况
						if(x < 0){
							x = 0;
						}
						else if(x > document.documentElement.clientWidth - oDiv.offsetWidth){
							x = document.documentElement.clientWidth - oDiv.offsetWidth;
						}
						
						if(y < 0){
							y = 0;
						}
					    else if(y > document.documentElement.clientHeight - oDiv.offsetHeight){
					    	y = document.documentElement.clientHeight - oDiv.offsetHeight;
					    }
					    
					    oDiv.style.left = x + 'px';
					    oDiv.style.top = y + 'px';
					}
					
					
					document.onmouseup = function(){
					    document.onmousemove = null;
						document.onmouseup = null;
					}
					
					//解决FF问题
					return false;
				}
			}
		</script>
	</head>
	<body>
	   <div id = "div1"></div>
	</body>
</html>