Java教程

移动端事件

本文主要是介绍移动端事件,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

移动端事件:
苹果推出: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 设置触摸操作时浏览器的默认行为;

这篇关于移动端事件的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!