`

移动互联网终端的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);

 

分享到:
评论

相关推荐

    全面解析终极移动终端MID

    综上所述,MID作为一种新兴的移动互联网设备,在技术进步和市场需求双重推动下,正逐渐成为集多媒体娱乐、通信和个人信息管理于一体的高度集成化的终端设备。随着技术的不断进步和发展,MID有望在未来成为人们日常...

    移动终端应用开发(HTML5)报告

    - **技术背景与趋势**:随着移动互联网的飞速发展,越来越多的技术公司开始关注移动终端的应用开发。IBM BA(Cognos) Mobile、SAP、QlikView、Tableau等众多知名BI厂商纷纷推出针对移动设备的解决方案,这些解决方案...

    HTML5在移动互联网开发中的运用.pdf

    HTML5作为一种新兴的网页开发标准,在移动互联网领域的作用愈发凸显。它不仅仅是一个简单的升级版HTML,而是一个全新体系的网络标准,为移动设备上的网页应用带来了革命性的改进。HTML5的开发和应用,正逐渐改变着...

    《Qzone Touch跨终端优化》PDF版本下载.txt

    跨终端优化是现代互联网产品开发中不可或缺的一部分,尤其是在移动互联网时代。通过采用合适的策略和技术手段,可以显著提升用户体验和满意度。Qzone Touch 的成功案例为我们展示了如何有效地进行跨终端优化,值得...

    《计算机基础与应用(第五版)》项目三 任务3 移动终端应用 .ppt

    《计算机基础与应用(第五版)》项目三的第三任务主要关注移动终端的应用,这是现代生活中不可或缺的一部分。移动终端不仅包括我们熟知的智能手机,还涵盖了平板电脑、笔记本电脑以及智能POS机等多种设备。这些设备在...

    《计算机基础与应用(第五版)》项目三 任务3 移动终端应用..ppt

    WLAN通常在家庭、办公室或公共热点区域提供高速互联网访问,而移动网络(如3G、4G、5G)则允许用户在任何有信号覆盖的地方保持在线,尤其适合户外和长途旅行时使用。连接这两种网络的步骤包括设置网络参数、搜索可用...

    使用_Dojo_Mobile_为_iOS_智能终端开发_Native-like_Web_应用

    随着移动互联网技术的迅猛发展,为iOS等智能终端开发应用程序成为了开发者的重要技能之一。iOS,作为Apple公司推出的移动操作系统,已经广泛应用于iPhone、iPod Touch、iPad等设备中。iOS应用开发主要有原生应用...

    基于移动终端设备的集装箱堆场管理系统的研究与实现.docx

    随着信息技术在物流领域的快速发展,特别是移动互联网技术的日益成熟,越来越多的企业开始探索利用移动终端设备来提升业务效率和管理水平。传统的堆场管理通常依赖于人工记录和处理,这种方式不仅耗时耗力,还容易...

    电信设备-用于IOS移动终端的加密设备.zip

    1. **iOS移动终端**:iOS是由苹果公司开发的操作系统,广泛应用于iPhone、iPad和iPod touch等设备。由于其封闭性与安全性,iOS设备在企业和个人用户中受到高度青睐。 2. **加密设备**:加密设备是指能够对数据进行...

    移动平台技术

    5. **移动互联网时代**(本世纪最初10年):移动通信技术和互联网技术的融合,催生了移动互联网时代的到来。移动设备如智能手机和平板电脑成为主流,人们可以随时随地通过这些设备访问互联网。 #### 二、移动终端...

    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 开发框架,帮助开发者...

    10大优秀的移动Web应用程序开发框架推荐

    随着移动互联网技术的快速发展,移动Web应用程序的需求日益增长。本文将详细介绍10个优秀的移动Web应用程序开发框架,这些框架可以帮助开发者更高效地开发移动Web应用。 #### 1. Sencha Touch Framework - **概述*...

    智能终端操作系统比较分析与应用研究.pdf

    随着移动互联网和物联网的发展,智能终端的应用已广泛覆盖社会的各个领域。本文对智能终端操作系统进行了比较分析,重点研究了iOS、Android和Ubuntu这三种代表性操作系统的技术架构、开发环境、应用发布方式以及技术...

    云词 Remword_2.4.2

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

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

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

    vuejs移动端实现div拖拽移动

    为了实现这个功能,我们需要了解并利用触摸事件(touch events)以及JavaScript的相关知识。 首先,触摸事件是专门为触摸屏设备设计的一系列事件,与传统的鼠标事件(如`mousedown`、`mousemove`、`mouseup`)相...

    MUI

    3. **高性能优化**:MUI针对移动设备的特点进行了深度优化,如使用异步加载策略减少页面加载时间,利用硬件加速提升动画性能,以及对touch事件的精细化处理等,确保了应用运行流畅。 4. **良好的生态系统**:MUI与...

    精选智能手机产品与市场分析-广东欧柏移动通信.pptx

    同时,它们支持多任务处理,允许用户在后台运行多个应用程序,并且拥有更强的互联网性能,使移动互联成为可能。 【智能与普通手机的区别】 智能和普通手机的主要区别在于可定制性、可玩性和软件生态。智能机用户...

Global site tag (gtag.js) - Google Analytics