`

移动互联网终端的touch事件

阅读更多

跟踪触摸的事件:

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);

 

分享到:
评论

相关推荐

    vue2.0移动端滑动事件vue-touch的实例代码

    Vue-touch的使用 有时候我们不止需要有返回键,也要有手势滑动切换页面的功能时,这个时候vue-touch就派上用场了 API地址: https://github.com/vuejs/vue-touch/tree/next 安装 npm insall vue-touch@next --save ...

    2014值得推荐的10个移动 Web 应用程序开发框架

    在最近几年里,移动互联网高速发展、市场潜力巨大。继计算机、互联网之后,移动互联网正掀起第三次信息技术革命的浪潮,新技术、新应用不断涌现。今天这篇文章向大家推荐10大优秀的移动 Web 开发框架,帮助开发者...

    云词 Remword_2.4.2

    支持包括Web网站 电脑桌面 平板 手机以及电视等多种终端设备 云词在算法设计上采用了人类记忆规律的最新研究成果 为用户提供查词 背词 阅读 听力和测试等全方位 智能化的学习服务 同时创造性的利用了移动互联网和云...

    超声波指纹识别明年亮相:不用于Touch ID识别

    不过,不只是手机厂商凑热闹,芯片厂商高通也来赶时髦——日前,在移动互联网大会上,高通就演示了新颖的超声波指纹识别技术。据悉,应用这一技术的移动终端,预计在明年上市。 不用于Touch ID的识别 记者了解到,...

    传感技术中的超声波指纹识别明年亮相:不用于Touch ID识别

    不过,不只是手机厂商凑热闹,芯片厂商高通也来赶时髦——日前,在全球移动互联网大会上,高通就演示了新颖的超声波指纹识别技术。据悉,应用这一技术的移动终端,预计在明年上市。 不用于Touch ID的识别 记者了解...

    原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】

    本文实例讲述了原生js实现可兼容PC和移动端的拖动滑块功能...但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。 以下是四种touch事件 touchstart: //

    vuejs移动端实现div拖拽移动

    touchcancel 当一些更高级别的事件发生的时候(如电话接入或者弹出信息)会取消当前的touch操作,即触发touchcancel。一般会在touchcancel时暂停游戏、存档等操作。 效果图 实现步骤 (一)htm

    Vue移动端右滑屏幕返回上一页附源码下载

    Vue touch directive是一个用于移动设备操作指令的轻量级的VUE组件。使用它可以轻松实现屏幕触控、滑动触发事件,提高用户体验。本文结合实例讲解如何实现Vue移动端右滑屏幕返回上一页。 查看演示 下载源码 安装...

    一种基于压力传感触控技术的智能地板

    随着智能终端的普及、移动互联网时代的来临,复杂室内环境下的定位与导航的需求日益增大,同时,IPS在公共安全、移动电子商务等领域都有着广泛的应用。目前,IPS采用的定位技术主要包括RFID、Bluetooth、WiFi、UWB、...

    工业电子中的一种基于压力传感触控技术的智能地板

    随着智能终端的普及、移动互联网时代的来临,复杂室内环境下的定位与导航的需求日益增大,同时,IPS在公共安全、移动电子商务等领域都有着广泛的应用。目前,IPS采用的定位技术主要包括RFID、Bluetooth、WiFi、UWB、...

    基于JS实现移动端向左滑动出现删除按钮功能

    最近在做移动端项目时,需要实现一个列表页面的每一项item向左滑动时...下面是我后来实现后的代码,其实就是用了原生js的touch事件,再结合触摸点的坐标来判断左滑和右滑, <!DOCTYPE html> <html> <hea

    原生js实现移动端触摸轮播的示例代码

    PC端上实现图片轮播效果很简单,只要通过使用click事件就可以非常简单的实现效果,但是在移动端上,就要通过核心的touch事件来实现。 下面是移动端手指滑动轮播图的完整代码。 <!DOCTYPE html> <html> &lt...

    Vue实现移动端左右滑动效果的方法

    1. 最近得到一个新需求,需要在Vue项目的移动端页面上加上左右滑动效果,在网上查阅资料,最终锁定了vue-touch 2. 下载vue-touch (https://github.com/vuejs/vue-touch/tree/next) 注意:如果Vue是2.x 的版本的话...

    JS仿京东移动端手指拨动切换轮播图效果

    这个效果的主要技术点依托于触屏设备特有的touch事件;好了,接下来就进入主题吧。 首先是html布局: 1. 这里强调的是记得给html加上viewport这个适口属性。 2. 由于在拨动第一张图片以及最后一张图片的时候需要...

Global site tag (gtag.js) - Google Analytics