Advertisement

使用原生JS在移动设备上模拟触控操作(点击、长按、左右方向拖动及上下方向拖动)

阅读量:

以下是四种touch事件

touchstart: //手指放到屏幕上时触发

touchmove: //手指在屏幕上滑动式触发

touchend: //手指离开屏幕时触发

touchcancel: //系统取消touch事件的时候触发,这个好像比较少用

每当某个触摸事件触发电能时,系统会创建一个event对象,并将其包含的三个触摸列表传递给处理模块。

touches: //当前屏幕上所有手指的列表

targetTouches: //当前dom元素上手指的列表,尽量使用这个代替touches

changedTouches: //在处理当前事件时涉及的手指列表,请尽量使用这个属性来替代 touches

每个触控操作在这些列表中都属于touch对象,并且触控信息被包含在touch对象中。具体来说:

clientX / clientY: //触摸点相对浏览器窗口的位置

pageX / pageY: //触摸点相对于页面的位置

screenX / screenY: //触摸点相对于屏幕的位置

identifier: //touch对象的ID

target: //当前的DOM元素

注意:

手指在滑动整个屏幕时会带来浏览器的行为变化;例如滚动和缩放等操作都是其中之一。因此,在触控事件发生时应避免同时进行缩放操作。

1.禁止缩放

通过me

全部评论 (0)

还没有任何评论哟~