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

文章目录

1.手指事件：
2.touches当前屏幕中的手指列表：
3.重力加速度事件：
4.手机倾斜事件:
5.手机摇一摇：
6.多指旋转：
7.多指缩放:

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");//相当于mousedownbox.addEventListener('touchstart',function(){this.innerHTML='手指按下了';});//相当于mousemovebox.addEventListener('touchmove',function(){this.innerHTML='手指移动了';});//相当于mouseoutbox.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");//相当于mousedownbox.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");//相当于mousedownwindow.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");//相当于mousedownwindow.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>

移动端手指事件和手机事件：相关推荐

移动端touch事件和click事件的区别
移动端touch事件和click事件的区别 1.touch事件以下是四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动 ...
移动端click延迟和tap事件
一.click等事件在移动端的延迟 click事件在移动端和pc端均可以触发,但是在移动端有延迟现象. 1.背景由于早期移动设备浏览网页时内容较小,为了增强用户体验,苹果公司专门为移动设备设计了双击 ...
web api、获取DOM元素的方式、事件理解、click事件在移动端300ms延时、事件对象、事件委托、常见事件类型
web api: API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力 ...
HTML5滑动(swipe)事件,移动端触摸（touch）事件
目有个交互需要实现手指滑动的交互,pc端使用mousedown,mousemove,mouseup监听实现. 但在ios设备上mousemove是不好监听的,同类的方法是touchstart,touc ...
【JS教程】移动端 Touch（触摸）事件
一.pc端事件在移动端的问题移动设备主要特点是不配备鼠标,键盘也只是在需要输入的地方才会激活虚拟键盘.所以以前的pc端事件在移动端使用起来就没有那么好用,虽然部分仍然可以使用. 1. click事件 ...
摇一摇抽奖 php,利用HTML5的devicemotion事件实现手机摇一摇抽奖，年会抽奖
摇一摇JS脚本逻辑: 接下来是移动端JS脚本逻辑的实现,摇一摇的实现需借助html5新增的devicemotion事件,获取设备在位置和方向上的改变速度的相关信息,该事件的基本使用如下:if (win ...
苹果手机html5摇一摇游戏戏码,利用HTML5的devicemotion事件实现手机摇一摇抽奖，年会抽奖，html5devicemotion...
利用HTML5的devicemotion事件实现手机摇一摇抽奖,年会抽奖,html5devicemotion 摇一摇JS脚本逻辑: 接下来是移动端JS脚本逻辑的实现,摇一摇的实现需借助html5新增的 ...
手机html5 tap事件,HTML5触摸事件演化tap事件介绍
触摸事件是移动浏览器特有的HTML5事件,虽然click事件在pc和移动端更通用,但是在移动端会出现300ms延迟,较为影响用户体验,300ms延迟来自判断双击和长按,因为只有默认等待时间结束以确定没 ...
工作手记之移动端中文输入法触发oninput事件的解决方法
事件背景工作过程中涉及到了移动端输入内容长度的限定,这就要求需要对输入过程中内容的变化进行监控和判定,以决定是否可以继续输入,所以就想着是否可以在相关输入处监听oninput事件?但是在手机端,中文 ...

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

文章目录

1.手指事件：

2.touches当前屏幕中的手指列表：

3.重力加速度事件：

4.手机倾斜事件:

5.手机摇一摇：

6.多指旋转：

7.多指缩放:

移动端手指事件和手机事件：相关推荐

最新文章

热门文章