谷粒音乐day02_事件基础_（一个隐患_事件点透_移动端跳转方案_event）

疯子@123

已于 2023-02-15 11:19:16 修改

阅读量113

点赞数

分类专栏：前端文章标签： javascript 前端 html

于 2023-02-01 09:59:00 首次发布

本文链接：https://blog.csdn.net/qq_39128254/article/details/128827302

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章目录

- - - - 一个隐患
        事件点透
        移动端跳转方案
        event

一个隐患

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#item{
				width: 200px;
				height: 200px;
				background: pink;
				font-size: 30px;
				text-align: center;
				line-height: 200px;
				overflow: auto;
			}
		</style>
	</head>
	<body>
		<div id="item">
			qqqqqqqqqqqqqqqqqq
		</div>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			/*
				1.meta 标签
				2.全面阻止事件的默认行为
					隐患：页面上所有的滚动条失效
					-->自定义更牛逼的滚动条
				3.一个适配方案
			*/
			document.addEventListener("touchstart",function(ev){
				ev=ev||event;
				ev.preventDefault();
			})
			
			;(function(){
				var styleNode = document.createElement("style");
				var w = document.documentElement.clientWidth/16;
				styleNode.innerHTML="html{font-size:"+w+"px!important}"
				document.head.appendChild(styleNode);
			})()
		}
		
	</script>
</html>

事件点透

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.item{
				position: absolute;
				left: 0;
				top: 0;
				width: 200px;
				height: 200px;
				background: pink;
				opacity: .5;
			}
		</style>
	</head>
	<body>
		<div class="item"></div>
		<a href="http://www.atguigu.com">回娘家</a>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			/*
			1.pc端事件可以在移动端触发
			2.pc端事件有300毫秒延迟
			3.移动端事件不会有延迟
			*/
			var item = document.querySelector(".item");
			item.addEventListener("touchstart",function(){
				this.style.display="none";
			})
		}
		
	</script>
</html>

移动端跳转方案

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<a href="http://www.atguigu.com">回娘家</a>
		<a href="http://www.atguigu.com">回娘家</a>
		<a href="http://www.atguigu.com">回娘家</a>
		<a href="http://www.atguigu.com">回娘家</a>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			document.addEventListener("touchstart",function(ev){
				ev=ev||event;
				ev.preventDefault();
			})
			
			//移动端a标签的跳转方案 解决误触
			var aNodes = document.querySelectorAll("a");
			for(var i=0;i<aNodes.length;i++){
				aNodes[i].addEventListener("touchstart",function(){
					this.isMoved=false;
				})
				
				aNodes[i].addEventListener("touchmove",function(){
					this.isMoved=true;
				})
				
				aNodes[i].addEventListener("touchend",function(){
					if(!this.isMoved){
						location.href=this.href;
					}
				})
			}
		}
		
	</script>
</html>

event

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.item{
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				right: 0;
				margin: auto;
				width: 300px;
				height: 300px;
				background: pink;
			}
		</style>
	</head>
	<body>
		<div class="item"></div>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			document.addEventListener("touchstart",function(ev){
				ev=ev||event;
				ev.preventDefault();
			})
			
			var item = document.querySelector(".item");
			//changedTouches;触发当前事件的手指列表
			//targetTouches:触发当前事件时元素上的手指列表
			//touches:触发当前事件时屏幕上的手指列表
			item.addEventListener("touchstart",function(ev){
				ev = ev||event;
				var item = document.querySelector(".item")
				item.innerHTML="changed:"+ev.changedTouches.length+"<br/>";
				item.innerHTML="target:"+ev.targetTouches.length+"<br/>";
				item.innerHTML="touches:"+ev.touches.length+"<br/>";
			})
		}
		
	</script>
</html>