移动端手指事件和手机事件：

最新推荐文章于 2023-11-22 22:40:42 发布
最新推荐文章于 2023-11-22 22:40:42 发布
阅读量753 收藏 3
点赞数
分类专栏： 小程序端 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53791978/article/details/127617855
版权

文章目录

1.手指事件：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,user-scalable=no" />
		<title></title>
		<style>
			#box{
				width: 200px;
				height: 200px;
				background: green;
				color: #fff;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
		<script>
			/*
			 * touchstart			手指按下事件
			 * touchmove			手指移动事件
			 * touchend				手指离开事件
			 * 
			 * 注意：
			 * 		1、这些事件只能用事件监听函数来添加，不能用on添加
			 * 		2、移动端当中就不要再用鼠标的事件了
			 * 		3、移动端的事件会触发浏览器的默认行为，所以在调用事件的时候要把这个默认行为给阻止了
			 */
			
			document.addEventListener('touchstart',function(ev){
				ev.preventDefault();
			});
			
			var box=document.getElementById("box");
			
			//相当于mousedown
			box.addEventListener('touchstart',function(){
				this.innerHTML='手指按下了';
			});
			
			//相当于mousemove
			box.addEventListener('touchmove',function(){
				this.innerHTML='手指移动了';
			});
			
			//相当于mouseout
			box.addEventListener('touchend',function(){
				this.innerHTML='手指离开了';
			});
		</script>
	</body>
</html>
2.touches当前屏幕中的手指列表：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,user-scalable=no" />
		<title></title>
		<style>
			#box{
				width: 200px;
				height: 200px;
				background: green;
				color: #fff;
				font-size: 50px;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
		<script>
			/*
			 * touches			当前屏幕中的手指列表
			 * 
			 */
			var box=document.getElementById("box");
			
			//相当于mousedown
			box.addEventListener('touchstart',function(ev){
				//console.log(ev.touches);
				this.innerHTML=ev.touches.length;
			});
		</script>
	</body>
</html>
3.重力加速度事件：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,user-scalable=no" />
		<title></title>
		<style>
			#box{
				width: 200px;
				height: 200px;
				background: green;
				color: #fff;
				position: absolute;
				left: 50px;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
		<script>
			/*
			 * devicemotion						重力加速度事件
			 * accelerationIncludingGravity		重力加速度对象
			 * 		他身上有三个轴
			 * 			x:手机的宽
			 * 			y:手机的长
			 * 			z:手机的厚
			 * 
			 * 注意：这个事件只能放在window身上
			 */
			
			var box=document.getElementById("box");
			
			//相当于mousedown
			window.addEventListener('devicemotion',function(ev){
				var motion=ev.accelerationIncludingGravity;
				//console.log(ev.touches);
				var x=parseFloat(getComputedStyle(box).left);
				box.style.left=x+motion.x+'px';
			});
		</script>
	</body>
</html>
4.手机倾斜事件:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,user-scalable=no" />
		<title></title>
		<style>
			#box{
				width: 200px;
				height: 200px;
				background: green;
				color: #fff;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
		<script>
			/*
			 * deviceorientation			手机倾斜事件
			 * 		ev.beta					x轴的倾斜
			 * 		ev.gamma				y轴的倾斜
			 * 		ev.alpha				z轴的倾斜
			 * 
			 * 注意：这个事件只能放在window身上
			 */
			
			var box=document.getElementById("box");
			
			//相当于mousedown
			window.addEventListener('deviceorientation',function(ev){
				var motion=ev.accelerationIncludingGravity;
				//console.log(ev.touches);
				box.innerHTML=`x轴倾斜:${ev.beta.toFixed(1)}</br>y轴倾斜:${ev.gamma.toFixed(1)}</br>z轴倾斜:${ev.alpha.toFixed(1)}`;
			});
		</script>
	</body>
</html>
5.手机摇一摇：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,user-scalable=no" />
		<title></title>
	</head>
	<body>
		<script>
			var lastRange=0;		//上一次摇晃的幅度
			var isShake=false;		//决定用户到底有没有大幅度摇晃
			
			window.addEventListener('devicemotion',function(ev){
				var motion=ev.accelerationIncludingGravity;
				var x=Math.abs(motion.x);
				var y=Math.abs(motion.y);
				var z=Math.abs(motion.z);
				
				var range=x+y+z;			//当前摇晃的幅度
				if(range-lastRange>100){
					//这个条件成立说明用户现在已经在大幅度摇晃
					isShake=true;
				}
				
				if(isShake && range<50){	
					//这个条件成立，说明用户摇晃的幅度很小了就要停了
					alert('摇一摇了');
					isShake=false;
				}
			});
		</script>
	</body>
</html>
6.多指旋转：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,user-scalable=no" />
		<title></title>
		<style>
			#box{
				width: 200px;
				height: 200px;
				background: green;
				color: #fff;
				font-size: 50px;
			}
		</style>
	</head>
	<body>
		<div id="box">kaivon</div>
		<script>
			/*
			 * gesturestart				两个或者两个以上手指按下
			 * gesturechange			两个或者两个以上手指变换
			 * gestureend				两个或者两个以上手指离开
			 * 
			 * ev.rotation				这个值是start与move的旋转度数的差值
			 */
			
			//一定要阻止浏览器的默认行为
			document.addEventListener('touchstart',function(ev){
				ev.preventDefault();
			});
			document.addEventListener('touchmove',function(ev){
				ev.preventDefault();
			});
			
			var box=document.getElementById("box");
			
			
			var startDeg=0;		//上次旋转后的角度
			//两个或者两个以上手指按下
			box.addEventListener('gesturestart',function(){
				this.style.background='blue';
				
				//rotate(90deg)
				if(this.style.transform){
					startDeg=parseFloat(this.style.transform.split('(')[1]);
				}
			});
			
			//两个或者两个以上手指变换
			box.addEventListener('gesturechange',function(ev){
				/*this.style.background='black';
				this.innerHTML=ev.rotation;*/
				
				this.style.transform='rotate('+(ev.rotation+startDeg)+'deg)';
			});
			
			//两个或者两个以上手指变换
			box.addEventListener('gestureend',function(){
				this.style.background='green';
			});
		</script>
	</body>
</html>
7.多指缩放:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,user-scalable=no" />
		<title></title>
		<style>
			#box{
				width: 200px;
				height: 200px;
				background: green;
				color: #fff;
				font-size: 50px;
				position: absolute;
				left: 70px;
				top: 100px;
			}
		</style>
	</head>
	<body>
		<div id="box">kaivon</div>
		<script>
			/*
			 * gesturestart				两个或者两个以上手指按下
			 * gesturechange			两个或者两个以上手指变换
			 * gestureend				两个或者两个以上手指离开
			 * 
			 * ev.rotation				这个值是start与move的旋转度数的差值
			 * ev.scale					这个值是start与move的缩放倍数的差值
			 */
			
			//一定要阻止浏览器的默认行为
			document.addEventListener('touchstart',function(ev){
				ev.preventDefault();
			});
			document.addEventListener('touchmove',function(ev){
				ev.preventDefault();
			});
			
			var box=document.getElementById("box");
			
			
			var startScale=1;		//上次缩放后的角度
			//两个或者两个以上手指按下
			box.addEventListener('gesturestart',function(){
				this.style.background='blue';
				
				//rotate(90deg)
				if(this.style.transform){
					startScale=parseFloat(this.style.transform.split('(')[1]);
				}
			});
			
			//两个或者两个以上手指变换
			box.addEventListener('gesturechange',function(ev){
				/*this.style.background='black';
				this.innerHTML=ev.rotation;*/
				
				var sc=ev.scale*startScale;
				sc=sc<0.5?0.5:sc;
				
				this.style.transform='scale('+sc+')';
			});
			
			//两个或者两个以上手指变换
			box.addEventListener('gestureend',function(){
				this.style.background='green';
			});
		</script>
	</body>
</html>
Sun Peng
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
mysql touches_html5手机触屏touch事件介绍
weixin_42509766的博客
02-05 129
HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件：touchstart：触摸开始的时候触发touchmove：手指在屏幕上滑动的时候触发touchend：触摸结束的时候触发而每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的一系列...
Javascript移动端触屏滑动事件详解
tianxianghuiwei的博客
11-11 1817
同样首先阻止页面的滚屏行为，touchmove触发后，会生成一个event对象，在event对象中获取touches触屏列表，取得第一个touch,并记下pageX,pageY的坐标，算出差值，得出手指滑动的偏移量，使当前DOM元素滑动。触发touchstart事件后，会产生一个event对象，event对象里包括触摸列表，获得屏幕上的第一个touch,并记下其pageX,pageY的坐标。changedTouches: //涉及当前事件的手指的列表，尽量使用这个代替touches。
移动端原生手势事件
weixin_43294560的博客
08-13 978
touchstart 当手指接触屏幕时触发 touchmove 当已经接触屏幕的手指开始移动的时候触发 touchend 当手指离开屏幕时触发 touchcancel 可由系统进行的触发，比如手指触摸屏幕的时候，突然alert了一下，或者系统中其他打断了touch的行为，则可以触发该事件 1、由于触摸会导致屏幕动来动去,使用时先阻止默认事件 event.preventDefault() 2、event对象包含的额外参数 (1)touches：表示当前跟踪的触摸操作的touch对象的数组。
移动端click事件、touch事件、tap事件的区别
最新发布
weixin_59525879的博客
11-22 1062
click事件：click事件是在用户点击屏幕的时候触发，如果是移动设备，则会在用户点击屏幕的同时触发touch事件。但是，click事件的响应时间比touch事件慢，因为click事件需要等待用户离开屏幕后才能触发。tap事件：tap事件是在用户点击屏幕的时候触发，与click事件类似，但是响应时间比click事件快。touch事件：touch事件是在用户触摸屏幕的时候触发，可以监听到触摸的开始、移动、结束等状态。在移动端，有三种常见的事件类型，click事件、touch事件、tap事件。
移动端事件
MissXu666的博客
07-21 257
移动端事件主要有触摸、滑动、点击、拖拽、双击、旋转、放大缩小，下面主要会介绍前三种事件。
移动端手指操控左右滑动的菜单
10-16
总结来说，移动端手指操控的左右滑动菜单是一个结合了HTML、CSS和JavaScript技术的交互设计。通过合理的布局和动画效果，以及精确的触摸事件处理，可以创建出流畅、直观的用户界面。在实际项目中，根据需求和性能...
移动端html5模拟长按事件的实现方法
09-22
在移动端HTML5开发中，由于浏览器原生不支持...总的来说，通过以上步骤和代码，我们可以为移动端HTML5页面创建一个基本的长按事件模拟，实现类似App的交互效果。在实际项目中，可能还需要根据具体需求进行调整和优化。
javascript开发移动端app网站-处理手机手势,手指触摸事件.zip
01-10
了解并熟练运用这些触摸事件和手势处理，是构建高性能、响应式的移动端Web应用的关键。在实际开发中，还需要考虑到不同设备和浏览器之间的兼容性问题，以及如何优化性能，避免过度的触摸事件监听导致的性能下降。...
浅谈移动端之js touch事件 手势滑动事件
11-27
当开始一个touchstart事件的时候，获取此刻手指的横坐标startX和纵坐标startY； 当触发touchmove事件时，在获取此时手指的横坐标moveEndX和纵坐标moveEndY;最后，通过这两次获取的坐标差值来判断手指在手机屏幕上的...
移动端手指放大缩小插件与js
12-10
通过这个示例，我们可以学习到如何利用JavaScript和触摸事件来实现移动端的交互功能，这对于移动应用和响应式网站的开发是非常重要的技能。同时，这个例子也展示了如何在实际项目中使用源码，以提高用户体验。
html 手指状态,CSS 鼠标样式和手指样式整理
weixin_31689491的博客
05-31 635
CSS 鼠标样式和手指样式整理发布时间：2013-08-13 11:36:19 作者：佚名 我要评论要用到鼠标样式效果，就顺便整理了下十五种CSS鼠标样式，小例子供大家使用啊，下面与大家分享下CSS鼠标样式语法及示例，有需求的朋友可以参考下，希望对大家有所帮助巧合要用到鼠标样式效果，就顺便整理了下十五种CSS鼠标样式，小例子供大家使用啊。CSS鼠标样式语法如下：任意标签中插入 style...
移动端事件详解
webxiaoma
07-06 1976
今天来总结一下移动端事件的用法和注意事项。废话就不多说了，直接上吧！一、移动端基础事件1.基础事件touchstart 手指按下时触发 touchmove 手指移动时触发 touchend 手指抬起时触发2.使用方法我们在使用上面三个事件时，要用js 的事件绑定方式去使用（addEventListener()）, JQ 的 on() 等绑定事件不起作用，例如：var body = docume
移动端JS之轻敲tap事件的封装
郭蕾蕾 努力的包子
11-02 6242
我们知道在移动端（这里小编还是强调一下把页面变成移动端页面千万别忘记视口属性viewport的设置）中我们的浏览器只认识三个事件（touchstart、touchmove、touchend）,而我们使用其他的框架封装的事件全都是使用这三个事件来封装来的，那么我们接下来就给大家拿一个实例来分析一下如何使用这三个基础的函数来进行封装！    好现在我们来分析一下整个函数封装的思路：如果是轻敲的话那必
jquery实现手机端长按响应事件
08-18 2万+
var time = 0;//初始化起始时间 $("#imgDiv").on('touchstart', '.previewImg', function(e){ e.stopPropagation(); var index=$("#imgDiv").find(".image").index($(this)); time = setTimeout(function
手机端touch事件
欧阳小白的成长博客
05-29 662
前提：touchstart,touchmove,touchend这三个事件可以通过原生和jq绑定。原生：document.querySelector("#aa").addEventListener('touchmove', function(){...});jq：  $(".aa").on("touchmove",function (e) {...};1.获取当前touch位置 $('#webch...
手型显示html,css各种手型集合(css禁止手型)
weixin_42650811的博客
06-11 396
html>css各种手型集合(css禁止手型).auto{cursor:auto;}.deafult{cursor:default;}.none{cursor:none;}.context-menu{cursor:context-menu;}.help{cursor:...
html 中如何让鼠标箭头移到某个div上就变为手型，移出后再变为原型。
热门推荐
tangjunbin10的专栏
04-27 4万+
给这个DIV的样式加一条：cursor:pointer
JavaScript 监听手机端的touch滑动事件（滑动手势）
For_My_Own_Voice的博客
08-09 6915
如何监听移动端滑动手势（上 / 下 / 左 / 右滑动），今天记录下。 var startx, starty; //获得角度 function getAngle(angx, angy) { return Math.atan2(angy, angx) * 180 / Math.PI; }; //根据起点终点返回方向 1向上滑动 2向下滑动 3向左滑动 4向右滑动 0点击事件 func...
html div单击事件,给div绑定点击事件三个方法
weixin_42393452的博客
06-05 1万+
基础代码测试div {font-size: 2em;width: 250px;cursor: pointer /*变成手型*/}.clickme {background-color: #2aabd2;}方法1-javascript代码绑定事件绑定-点击我document.getElementById("clickme").onclick = function () {location.href =...
我需要一个 js事件：移动端手指右滑跳转到百度网站
06-08
你可以使用以下代码实现在移动端手指右滑时跳转到百度网站： ```javascript var startX; document.addEventListener('touchstart', function(e) { startX = e.touches[0].clientX; }); document....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Sun Peng

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值