移动端事件

最新推荐文章于 2024-04-23 11:37:57 发布

AP0906424

最新推荐文章于 2024-04-23 11:37:57 发布

阅读量696

点赞数

文章标签： html5

原文链接：https://blog.csdn.net/L1061256268/article/details/80787651?utm_medium=distribute.pc_relevant.none-task-blog-baidujs-2

版权

一、移动端基本事件
1.基础事件

touchstart 手指按下时触发
touchmove 手指移动时触发

touchend 手指抬起时触发

2.使用方法

我们在使用上面三个事件时，要用js 的事件绑定方式去使用（addEventListener()）, JQ 的 on() 等绑定事件不起作用，

例如：

var box = document.querySelector("#box");
box.addEventListener("touchstart",start);
 
function start(e) {
  console.log("按下手指");
  console.log(e)
}

3.移动端事件对象

移动端中通过事件对象我们能获取很多信息。比如，手指点击的坐标，手指一动的距离，点击屏幕的手指个数等等。

tocuhes 当前手指触屏的个数

targetTouches 位于当前DOM 元素上的手指的一个列表

changeTocuhes 涉及当前事件的手指的一个列表

clientX 触摸目标在视口中的x坐标

clientY 触摸目标在视口中的Y坐标

pageX 触摸目标在页面中的x坐标

pageY 触摸目标在页面中的y坐标

screenX 触摸目标在屏幕中的x坐标

screenY 触摸目标在屏幕中的y坐标

<div class="warp"></div>
 
 var div = document.querySelector(".warp");
 
div.addEventListener("touchstart",function(e){
   console.log(e)
   div.innerHTML =e.targetTouches.length;
});

如果要获取触摸点的坐标，要这样做：

div.addEventListener("touchstart",function(e){
   var tager = e.touches[0] // 获取第一个触点
   div.innerHTML = tager.pageX;
});

4.注意事项

移动端的点透：当上层元素发生点击的时候，下层元素也有点击特性，在300ms之后，如果上层元素消失或者隐藏，目标点就会“漂移”到下层元素身上，就会触发点击行为

解决：

1.下层不要使用有点击特性的元素

2.阻止PC事件

e.preventDefault();

阻止默认事件还会解决IOS10 下使用 overflow:hidden 失效问题

阻止默认事件还会禁止系统默认的滚动条，阻止橡皮筋效果

阻止默认事件还会禁止长按选中文字，选中图片，系统默认菜单。

二、移动端陀螺仪
1.重力感应（事件是绑定在window 上的）
devicemotion 事件
事件对象（主要）
acceration : 一个包含x,y,z 的属性对象，在不考虑重力的情况下，告诉你在每个方向上的加速度。
accelerationIncludingGravity : 一个包含x,y,z 的属性对象，在考虑z轴自然重力加速度的情况下，告诉你在每个方向上的加速度。
rotationRate : 一个包含表示方向的 alpha、beta 和 gamma属性对象。

 var div = document.querySelector('div');
     window.addEventListener('devicemotion',function(e){
      console.log(e)
        var motion = e.accelerationIncludingGravity;
        var x = motion.x;
        var y = motion.y;
        var z = motion.z; // 安卓显示正直，ios显示负值
 
        div.innerHTML = "x: " + x;
        div.innerHTML += "<br/>y: " + y;
        div.innerHTML += "<br/>z: " + z;
     })

2.横竖屏检测
orientationchange 事件
其中 window.orientatio 包含了设备横竖屏转动时的几个值：
0：表示肖像模式
90：表示向左旋转的横向模式
-90：表示向右旋转的横向模式

window.addEventListener('orientationchange',function(e){
     alert(window.orientation);
 })

3.检测手机旋转
deviceorientation 事件
事件对象属性：
alpha : 在围绕z轴旋转时，y轴的度数差，是一个介于0到360之间的浮点数
beta : 在围绕x轴旋转时，z轴的度数差，是一个介于-180到180之间的浮点数
gamma : 在围绕y轴旋转时，z轴的度数差，是一个介于-90到90之间的浮点数

var p = document.querySelector('p');
    window.addEventListener('deviceorientation',function(e){    
       body.innerHTML = "Z: " + e.alpha;  // 手机z轴旋转角度
    })

一、移动端基本事件
1.基础事件