• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > HTML5触摸事件演化tap事件介绍_html5教程技巧

HTML5触摸事件演化tap事件介绍_html5教程技巧

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含HTML5,触摸事件,tap等相关知识,匿名希望在学习及工作中可以帮助到您
触摸事件是移动浏览器特有的HTML5事件,虽然click事件在pc和移动端更通用,但是在移动端会出现300ms延迟,较为影响用户体验,300ms延迟来自判断双击和长按,因为只有默认等待时间结束以确定没有后续动作发生时,才会触发click事件。所以触摸事件反应更快,体验更好。

触摸事件的类型:

为了区别触摸相关的状态改变,存在多种类型的触摸事件。可以通过检查触摸事件的 TouchEvent.type 属性来确定当前事件属于哪种类型。

注意: 在很多情况下,触摸事件和鼠标事件会同时被触发(目的是让没有对触摸设备优化的代码仍然可以在触摸设备上正常工作)。如果你使用了触摸事件,可以调用 event.preventDefault() 来阻止鼠标事件被触发。

标准的触摸事件

事件名称 描述 包含touches数组

touchstart

当用户在触摸平面上放置了一个触点时触发。事件的目标 element 将是触点位置上的那个目标 element 是

touchmove

当用户在触摸平面上移动触点时触发。

事件的目标 element 和这个 touchmove 事件对应的 touchstart 事件的目标 element 相同,

哪怕当 touchmove 事件触发时,触点已经移出了该 element 。

是

touchend

当一个触点被用户从触摸平面上移除(当用户将一个手指离开触摸平面)时触发。

当触点移出触摸平面的边界时也将触发。例如用户将手指划出屏幕边缘。

已经被从触摸平面上移除的触点,可以在 changedTouches 属性定义的 TouchList 中找到。

是

touchenter

当触点进入某个 element 时触发。此事件没有冒泡过程。 是

touchleave

当触点离开某个 element 时触发。此事件没有冒泡过程。 是

touchcancel

当触点由于某些原因被中断时触发。有几种可能的原因如下(具体的原因根据不同的设备和浏览器有所不同):

  • 由于某个事件取消了触摸:例如触摸过程被一个模态的弹出框打断。
  • 触点离开了文档窗口,而进入了浏览器的界面元素、插件或者其他外部内容区域。
  • 当用户产生的触点个数超过了设备支持的个数,从而导致 TouchList 中最早的 Touch 对象被取消。
是

触摸对象属性

Touch.identifier 返回一个可以唯一地识别和触摸平面接触的点的值. 这个值在这根手指(或触摸笔等)所引发的所有事件中保持一致, 直到它离开触摸平面.
Touch.screenX 触点相对于屏幕左边沿的的X坐标. 只读属性.
Touch.screenY 触点相对于屏幕上边沿的的Y坐标. 只读属性.
Touch.clientX 触点相对于可见视区左边沿的的X坐标. 不包括任何滚动偏移. 只读属性.
Touch.clientY 触点相对于可见视区上边沿的的Y坐标. 不包括任何滚动偏移. 只读属性.
Touch.pageX 触点相对于HTML文档左边沿的的X坐标. 当存在水平滚动的偏移时, 这个值包含了水平滚动的偏移. 只读属性.
Touch.pageY 触点相对于HTML文档上边沿的的Y坐标. 当存在水平滚动的偏移时, 这个值包含了垂直滚动的偏移. 只读属性.
Touch.radiusX 能够包围用户和触摸平面的接触面的最小椭圆的水平轴(X轴)半径. 这个值的单位和 screenX 相同. 只读属性.
Touch.force 手指挤压触摸平面的压力大小, 从0.0(没有压力)到1.0(最大压力)的浮点数. 只读属性.
Touch.radiusY 能够包围用户和触摸平面的接触面的最小椭圆的垂直轴(Y轴)半径. 这个值的单位和 screenY 相同. 只读属性.
Touch.target

当这个触点最开始被跟踪时(在 touchstart 事件中), 触点位于的HTML元素. 哪怕在触点移动过程中, 触点的位置已经离开了这个元素的有效交互区域,

或者这个元素已经被从文档中移除. 需要注意的是, 如果这个元素在触摸过程中被移除, 这个事件仍然会指向它, 但是不会再冒泡这个事件到 window 或 document 对象.

因此, 如果有元素在触摸过程中可能被移除, 最佳实践是将触摸事件的监听器绑定到这个元素本身, 防止元素被移除后, 无法再从它的上一级元素上侦测到从该元素冒泡的事件. 只读属性.

IE10+的触摸事件

IE指针事件
事件名称 描述(在触摸设备上)
MSPointerDown 触摸开始
MSPointerMove 接触点移动
MSPointerUp 触摸结束
MSPointerOver 触摸点移动到元素内,相当于mouseover
MSPointerOut 触摸点离开元素,相当于mouseout

<

您可能想查找下面的文章:

  • HTML5知识点总结
  • HTML5的本地存储
  • HTML5本地存储之IndexedDB
  • Html5实现文件异步上传功能
  • Html5新标签datalist实现输入框与后台数据库数据的动态匹配
  • 详解HTML5 window.postMessage与跨域
  • HTML5拖放API实现拖放排序的实例代码
  • 解决html5中video标签无法播放mp4问题的办法
  • HTML5新特性 多线程(Worker SharedWorker)
  • Html5新增标签有哪些

相关文章

  • 2018-12-03如何 精通各种Web前端技术?
  • 2018-12-03基于mo.js制作的17种炫酷图标动画特效
  • 2017-08-06微信浏览器取消缓存的方法
  • 2018-12-03HTML5 CSS3:3D展示商品信息示例
  • 2018-12-03HTML5开源游戏引擎lufylegend1.5.0发布
  • 2018-12-03用HTML5制作烟火效果的教程_html5教程技巧
  • 2018-12-03如何使用H5做出上传图片功能
  • 2018-12-03HTML5使用DOM进行自定义控制
  • 2018-12-03现阶段用 HTML5 重构网站,力度怎样合适?
  • 2018-12-03ionic2中怎么使用自动生成器

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 使用HTML5在网页中嵌入音频和视频播放的基本方法_html5教程技巧
    • css 如何让背景图片拉伸填充避免重复显示_html5教程技巧
    • html5之Canvas路径绘图、坐标变换应用实例
    • 关于iphoneX 适配客户端H5页面的问题
    • HTML5-WebSocket实现聊天室示例
    • HTML5未来发展趋势
    • HTML5 Canvas实现文本对齐的代码总结
    • html5小技巧之通过document.head获取head元素
    • 新浪微博的 HTML5 页面体验已经和 native app 差不多了,是否意味着 HTML5 可以取代 native 了?
    • input实现文字超出省略号(代码示例)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有