ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

移动端事件

2021-09-18 23:30:08  阅读:153  来源: 互联网

标签:触发 触摸 默认 事件 移动 Pointer 属性


移动端事件:
苹果推出:Touch触摸事件

微软推出:Pointer指针事件(统一鼠标、触摸、笔)

常量名前加$表示这个常量是获取的DOM元素;

Touch事件:

Touch事件类型:

touchstart | touchmove | touchend | touchcancel(touchcancel事件是在在touchend之前发生其他意外事件,如电话进来,弹出其他层等,就会触发touchcancel,不触发touchend)

注意事项:

1.Touch事件在PC端不会触发,鼠标事件在PC端和移动端都会触发;

2.即使触摸点移出目标元素,touchmove事件依然会持续触发,而mousemove事件不会再触发;

3.Touch事件的特征检测(判断浏览器是否支持Touch事件):

使用in关键字,可以检测元素是否可以访问某个属性,如:console.log('ontouchstart' in window),结果是一个布尔值。

Touch事件event事件对象

1.event对象的常用属性

type属性:返回触发事件的类型,如touchstart等;

target属性:返回绑定事件的DOM元素,即目标元素;

touches属性:返回一个数组,屏幕上所有触摸点;

targetTouches属性:返回一个数组,起始于目标上的所有触摸点;

changedTouches属性:事件触发时,状态发生了改变的所有触摸点

2.触摸点的常用属性

获取触摸点:触摸点是event对象的属性的元素,即:

const touch = evt.changedTouches[0];

identifier属性:是触摸点的唯一标识符,返回的是一个整数;

target属性:返回目标元素;

screenX | screenY属性:返回触摸点相对屏幕的x | y坐标;(少用)

clientX | clientY属性:返回触摸点相对于可视区的x | y坐标;

pageX | pageY属性:返回触摸点相对于页面的x | y坐标;

3.阻止浏览器的默认行为

默认行为:如scrolling(滚动)、pinch/zoom(用手指缩放),鼠标事件等默认行为;

阻止默认行为的方法:

可以在touch的事件处理函数中使用evt.preventDefault()阻止浏览器的默认行为;

可以在需处理的DOM的css中写touch-action属性,告诉浏览器哪些触摸操作让浏览器处理,阻止其他触摸操作的默认行为。属性值具体参考网址:touch-action - CSS(层叠样式表) | MDN

Pointer事件

1.Pointer事件的类型

pointerover/pointerenter/pinterout/pointerleave/pointerdown/pointermove/pointerup/pointercancel

2.注意事项:

2.1:Pointer事件直接继承了鼠标事件,在此基础上又添加了其他一些内容,处理Pointer事件和处理鼠标事件几乎一致;

2.2:Pointer事件在PC端和移动端都会触发;

2.3:触摸点移出目标元素,touchmove事件依然会持续触发,pointermove和mousemove事件不会再触发;

3.Pointer事件的特征检测(判断浏览器支不支持Pointer事件)

if('onpointerdown' in window){console.log('支持Pointer事件')};

4.Pointer事件的event对象

4.1.Pointer事件的event对象的常用属性

pointerId属性:指针id,返回一个整数,是触发点的唯一标识符;

type属性:返回的是触发的事件具体类型,如pointerout;

pointerType属性:指针类型,返回的是触发事件的类型(鼠标、笔、触摸);

target属性:返回目标元素;

screenX | screenY属性:指针相对于可视区的坐标,别名x | y;

pageX | pageY 属性:指针相对于HTML文档页面的坐标;

5.阻止浏览器的默认行为

5.1:阻止scrolling,pinch/zoom,鼠标事件等默认行为

Pointer的事件处理函数中,evt.preventDefault()阻止的是PC端的默认行为(不能阻止scrolling,pinch/zoom,鼠标事件等默认行为,可以阻止图片拖动的默认行为);

5.2 :可以在touch的时间处理函数中使用evt.preventDefault()阻止移动端的默认行为;

5.3:touch-action 设置触摸操作时浏览器的默认行为;

标签:触发,触摸,默认,事件,移动,Pointer,属性
来源: https://blog.csdn.net/visibleforest/article/details/120316196

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有