移动端（二）基础事件

最新推荐文章于 2023-11-11 11:16:29 发布

李不烦

最新推荐文章于 2023-11-11 11:16:29 发布

阅读量479

点赞数

分类专栏： JavaScript 文章标签：移动端事件

本文链接：https://blog.csdn.net/LWYYYYYY/article/details/95540408

版权

JavaScript 专栏收录该内容

67 篇文章 1 订阅

订阅专栏

一.移动端三个事件

1.ontouchstart--手指触碰事件

2.ontouchmove--手指移动事件

3.ontouchend--手指离开事件

可以分别对应PC端的 onmousedown、onmousemove、nomouseup三个事件

二.事件派发

事件派发有两种：dom0和dom2; 推荐dom2

dom0:

//不推荐使用 --- 因为有些模拟器不支持
box.ontouchstart = function(){
       console.log('start');
    };

dom2:使用事件监听

//dom2  --- 推荐（开发）
		box.addEventListener('touchstart',function(){
			console.log('start');
		});

三.取消系统默认行为

什么是系统默认行为：就是我们没有写相关的功能就有的功能；比如用手指长按屏幕就会弹出“复制，。。”页面功能，但我们没有写复制功能，就像下面的代码，长按出现复制页面；

取消默认行为有两种：1.return false; 对应dom0

2.event.preventDefault();对应dom2操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width"/>
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				background: pink;
			}
			#box2{
				background: deeppink;
			}
		</style>
	</head>
	<body>
		<div id="box">
	      啦啦啦啊啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
		</div>
		<div id="box2">啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
	</body>
	<script type="text/javascript">
		document.addEventListener('touchstart',function(event){
			//取消系统默认行为
			//return false;  //dom0
			event.preventDefault(); // dom2			
		});
	</script>
</html>

四.阻止冒泡

阻止冒泡：子元素触发的事件不传递到父元素；

event.stopPropagation();

举一个例子，父元素汉字上长按没有弹窗，子元素长按英文有弹窗，如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width"/>
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<!--
			汉字上长按没有弹窗
			英文有弹窗
		-->
		<div id="wrap">
		哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
					
			<div id="inner">
				laaaaaaaaaaaaaaaaallalaallalaal
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var wrap = document.getElementById('wrap');
		var inner = document.getElementById('inner');
		
		//汉字上长按没有弹窗
		wrap.addEventListener('touchstart',function(event){
			console.log('1111');
			event.preventDefault();
		});
		
		//英文有弹窗
		inner.addEventListener('touchstart',function(event){
			console.log('22222')
			//阻止冒泡,touchstart事件发生后，子元素阻止冒泡，不会将该事件传递到父元素
            //父元素就不会执行 touchstart事件，也就不会执行event.preventDefault();
			event.stopPropagation();
		});
		
	</script>
</html>

五.手指列表

event.changedTouches       目标元素上目标事件上的手指列表,  //精准
event.targetTouches        目标元素上的手指列表
event.touches              屏幕上的手指列表
三个对象都是数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width"/>
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				width: 200px;
				height: 200px;
				background: green;
			}
		</style>
	</head>
	<body>
		<div id="box">
			
		</div>
	</body>
	<!--
		//手指列表 ，  数组表示
		changedTouches       目标元素上目标事件上的手指列表  //精准
		targetTouches        目标元素上的手指列表
		touches              屏幕上的手指列表

	-->
	<script type="text/javascript">
		var box = document.getElementById('box');
		
		box.addEventListener('touchstart',function(event){
			var touch = event.changedTouches[0];
			
			console.log(touch.clientX);
			console.log(touch.clientY);
		});
		box.addEventListener('touchmove',function(event){
			var touch = event.changedTouches[0];
			
			console.log(touch.clientX);
			console.log(touch.clientY);
		});
		box.addEventListener('touchend',function(event){
			var touch = event.changedTouches[0];
			
			console.log(touch.clientX);
			console.log(touch.clientY);
		});
		
	</script>
</html>

李不烦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端（二）基础事件

一.移动端三个事件1.ontouchstart--手指触碰事件2.ontouchmove--手指移动事件3.ontouchend--手指离开事件可以分别对应PC端的 onmousedown、onmousemove、nomouseup三个事件二.事件派发事件派发有两种：dom0和dom2; 推荐dom2dom0://不推荐使用 --- 因为有些模拟器不支持box....
复制链接

扫一扫