跟踪触摸的事件:
touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。
touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。
touchend事件:当手指从屏幕上离开的时候触发。
touchcancel事件:当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间,文档中并没有具体说明,咱们只能去猜测了。
跟踪触摸的属性:
touches:表示当前跟踪的触摸操作的touch对象的数组。
targetTouches:特定于事件目标的Touch对象的数组。
changeTouches:表示自上次触每个Touch对象包含的属性如下。
每个Touch对象包含的属性如下:
clientX:触摸目标在视口中的x坐标。
clientY:触摸目标在视口中的y坐标。
identifier:标识触摸的唯一ID。
pageX:触摸目标在页面中的x坐标。
pageY:触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
target:触目的DOM节点目标。摸以来发生了什么改变的Touch对象的数组。
阻止缩放
缺省的多点触摸设置不是特别的好用,因为你的滑动和手势往往与浏览器的行为有关联,比如说滚动和缩放。
要禁用缩放功能的话,使用下面的元标记设置你的视图区(viewport),这样其对于用户来说就是不可伸缩的了:
content="width=device-width, initial-scale=1.0, user-scalable=no"
阻止滚动
一些移动设备有缺省的touchmove行为,比如说经典的iOS overscroll效果,当滚动超出了内容的界限时就引发视图反弹。这种做法在许多多点触控应用中会带来混乱,但要禁用它很容易。
document.body.addEventListener('touchmove', function(event) {
event.preventDefault();
}, false);
相关推荐
Vue-touch的使用 有时候我们不止需要有返回键,也要有手势滑动切换页面的功能时,这个时候vue-touch就派上用场了 API地址: https://github.com/vuejs/vue-touch/tree/next 安装 npm insall vue-touch@next --save ...
在最近几年里,移动互联网高速发展、市场潜力巨大。继计算机、互联网之后,移动互联网正掀起第三次信息技术革命的浪潮,新技术、新应用不断涌现。今天这篇文章向大家推荐10大优秀的移动 Web 开发框架,帮助开发者...
支持包括Web网站 电脑桌面 平板 手机以及电视等多种终端设备 云词在算法设计上采用了人类记忆规律的最新研究成果 为用户提供查词 背词 阅读 听力和测试等全方位 智能化的学习服务 同时创造性的利用了移动互联网和云...
不过,不只是手机厂商凑热闹,芯片厂商高通也来赶时髦——日前,在移动互联网大会上,高通就演示了新颖的超声波指纹识别技术。据悉,应用这一技术的移动终端,预计在明年上市。 不用于Touch ID的识别 记者了解到,...
不过,不只是手机厂商凑热闹,芯片厂商高通也来赶时髦——日前,在全球移动互联网大会上,高通就演示了新颖的超声波指纹识别技术。据悉,应用这一技术的移动终端,预计在明年上市。 不用于Touch ID的识别 记者了解...
本文实例讲述了原生js实现可兼容PC和移动端的拖动滑块功能...但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。 以下是四种touch事件 touchstart: //
touchcancel 当一些更高级别的事件发生的时候(如电话接入或者弹出信息)会取消当前的touch操作,即触发touchcancel。一般会在touchcancel时暂停游戏、存档等操作。 效果图 实现步骤 (一)htm
Vue touch directive是一个用于移动设备操作指令的轻量级的VUE组件。使用它可以轻松实现屏幕触控、滑动触发事件,提高用户体验。本文结合实例讲解如何实现Vue移动端右滑屏幕返回上一页。 查看演示 下载源码 安装...
随着智能终端的普及、移动互联网时代的来临,复杂室内环境下的定位与导航的需求日益增大,同时,IPS在公共安全、移动电子商务等领域都有着广泛的应用。目前,IPS采用的定位技术主要包括RFID、Bluetooth、WiFi、UWB、...
随着智能终端的普及、移动互联网时代的来临,复杂室内环境下的定位与导航的需求日益增大,同时,IPS在公共安全、移动电子商务等领域都有着广泛的应用。目前,IPS采用的定位技术主要包括RFID、Bluetooth、WiFi、UWB、...
最近在做移动端项目时,需要实现一个列表页面的每一项item向左滑动时...下面是我后来实现后的代码,其实就是用了原生js的touch事件,再结合触摸点的坐标来判断左滑和右滑, <!DOCTYPE html> <html> <hea
PC端上实现图片轮播效果很简单,只要通过使用click事件就可以非常简单的实现效果,但是在移动端上,就要通过核心的touch事件来实现。 下面是移动端手指滑动轮播图的完整代码。 <!DOCTYPE html> <html> <...
1. 最近得到一个新需求,需要在Vue项目的移动端页面上加上左右滑动效果,在网上查阅资料,最终锁定了vue-touch 2. 下载vue-touch (https://github.com/vuejs/vue-touch/tree/next) 注意:如果Vue是2.x 的版本的话...
这个效果的主要技术点依托于触屏设备特有的touch事件;好了,接下来就进入主题吧。 首先是html布局: 1. 这里强调的是记得给html加上viewport这个适口属性。 2. 由于在拨动第一张图片以及最后一张图片的时候需要...