js事件中级

最新推荐文章于 2024-11-24 17:49:29 发布

zhanjiejiaoxiangni

最新推荐文章于 2024-11-24 17:49:29 发布

阅读量198

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/zhanjiejiaoxiangni/article/details/83716159

javascript 专栏收录该内容

9 篇文章

订阅专栏

1、js默认行为，通过return false取消，比如屏蔽菜单右键菜单

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<title>默认行为</title>
		<style>
			
		</style>
		<script>
			/**知识点：1、return false 取消默认行为
					2、oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单
			*/
			/**demo:屏蔽菜单右键*/
			document.oncontextmenu = function(){
				
				return false;
			};
		</script>
	</head>
	<body>
		
	</body>
</html>

2、js自定义右键菜单展示
1）通过右键菜单事件，取消默认行为，设置自定义的div展示
2）设置div位置，和鼠标保持一致
3）增加鼠标点击事件，让自定义菜单隐藏

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<title>默认行为</title>
		<style>
			
			*{
				margin: 0;
				padding: 0;	
			}
			#div1{
			   width:50px;
				background: gray;
				border: 1px solid black;
				position: absolute;
				display:none;
			}
			ul li{
				list-style:none;
			}
		
		</style>
		<script>
			
			/**步骤：1、通过右键菜单事件，取消默认行为，设置自定义的div展示
					2、设置div位置，和鼠标保持一致
					3、增加鼠标点击事件，让自定义菜单隐藏
					*/
			/**demo:屏蔽菜单右键,自定义菜单*/
			document.oncontextmenu = function(ev){
				var oDiv = document.getElementById('div1');
				oDiv.style.display='block';
				
				var oEvent = ev || event;
				
				//设置div菜单的位置等于鼠标位置
				oDiv.style.left = oEvent.clientX + 'px';
				oDiv.style.top = oEvent.clientY + 'px';
				
				return false;
			};
			
			//增加鼠标点击事件，点击任何区域设置div隐藏
			document.onclick = function(){
				var oDiv = document.getElementById('div1');
				oDiv.style.display='none';
			};
		</script>
	</head>
	<body>
		<div id="div1">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
			</ul>
		</div>
	</body>
</html>

3、文本框限制只能输入数字和退格
原理：结合keyCode,根据0-9 分别对应keyCode的值，不在这个区间的输入直接return false关闭onkeydown事件的默认行为

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<title>默认行为</title>
		<style>
			
		</style>
		<script>
			/**原理：结合keyCode,根据0-9 分别对应keyCode的值，不在这个区间的输入直接return false关闭onkeydown事件的默认行为 */
			window.onload = function(){
				var oTxt = document.getElementById('txt1');
				oTxt.onkeydown = function (ev){
					oEvent = ev || event;
					//alert(oEvent.keyCode);
					//0-9对应的keyCode值为48-57,backspace键对应的keyCode 为8
					//允许按下backspace键和0-9之间的数字
					if(oEvent.keyCode !=8 &&(oEvent.keyCode<48 || oEvent.keyCode >57)){
						
						return false;
					}
					
				};
			};
		</script>
	</head>
	<body>
		<input type="text" id="txt1" />
	</body>
</html>

4、实现div简易拖拽
原理：三个事件 onmousedown：算出鼠标和div的相对距离

			document.onmousemove：根据鼠标位置和相对距离，得出div的正确位置
		
			document.onmouseup，关闭move事件，避免鼠标事件消失后div跟着继续移动

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<title>实现简易拖拽</title>
		<style>
			#div1{
				width:200px;
				height:200px;
				background:red;
				position:absolute;
			}
		</style>
		<script>
			/**原理：三个事件 onmousedown：算出鼠标和div的相对距离
			
				onmousemove：根据鼠标位置和相对距离，得出div的正确位置
			
				onmouseup，关闭move事件，避免鼠标事件消失后div跟着继续移动
			*/
			window.onload = function (){
				var oDiv = document.getElementById('div1');
				var posX = 0;
				var posY = 0;
				oDiv.onmousedown = function(ev){
				
					oEvent = ev || event;
					/**求出鼠标和div的距离*/
					posX = oEvent.clientX - oDiv.offsetLeft;
					posY = oEvent.clientY - oDiv.offsetTop;
					
					////根据鼠标位置计算div位置,实现div跟随鼠标保持距离移动
					document.onmousemove = function (ev){
						oEvent = ev || event;
						
						var l = oEvent.clientX - posX;
						var t = oEvent.clientY-posY;
						
						/**为防止div被拖出可视区，作以下判断*/
						if(l<0){
							l=0;
						}else if(l>document.documentElement.clientWidth - oDiv.offsetWidth){
							l = document.documentElement.clientWidth - oDiv.offsetWidth;
						}
						
						if(t<0){
							t=0;
						}else if(t>document.documentElement.clientHeight - oDiv.offsetHeight){
							t = document.documentElement.clientHeight - oDiv.offsetHeight;
						}
						
						
						oDiv.style.left = l +'px';
						oDiv.style.top = t + 'px';
					}
					//鼠标抬起时，取消move事件
					document.onmouseup = function(){
						document.onmousemove = null;
						document.onmouseup = null;
					}
					
					//为解决firefox拖拽空div时，会出现虚影，增加关闭默认行为
					return false;
					
				};
				
				
			};
		</script>
	</head>
	<body>
		<div id="div1"></div>
	</body>
</html>