touchstart:触摸开始的时候触发

touchmove:手指在屏幕上滑动的时候触发

touchend:触摸结束的时候触发

而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点(用来实现多点触控):

touches:当前位于屏幕上的所有手指的列表。

targetTouches:位于当前DOM元素上手指的列表。

changedTouches:涉及当前事件手指的列表。

每个触摸点由包含了如下触摸信息(常用):

identifier:一个数值,唯一标识触摸会话(touch session)中的当前手指。一般为从0开始的流水号(android4.1,uc)

target:DOM元素,是动作所针对的目标。

pageX/pageX/clientX/clientY/screenX/screenY:一个数值,动作在屏幕上发生的位置(page包含滚动距离,client不包含滚动距离,screen则以屏幕为基准)。 

function handleTouchEvent(event) {

//只跟踪一次触摸
    if (event.touches.length == 1) {
        var output = document.getElementById("output");
        switch (event.type) {
            case "touchstart":
                output.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
                break;
            case "touchend":
                output.innerHTML += "Touch ended (" + event.changedTouches[0].clientX + "," + event.changeTouches[0].clientY + ")";
                break;
            case "touchmove":
                event.preventDefault(); //阻止滚动事件冒泡,
                output.innerHTML += "Touch moved (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
                break;
        }
    }
}
document.addEventListener("touchstart", handleTouchEvent, false);
document.addEventListener("touchend", handleTouchEvent, false);
document.addEventListener("touchmove", handleTouchEvent, false);

手机触摸 事件, 当触摸屏幕时候触发相关推荐

  1. html手机模块化,jQuery 移动端拖拽(模块化开发,触摸事件,webpack)

    通过jquery可以很容易实现CP端的拖拽.但是在移动端却不好用了.于是我自己写了一个在移动端的拖拽demo,主要用到的事件是触摸事件(touchstart,touchmove和touchend). ...

  2. JS事件监听手机屏幕触摸事件 Touch

    JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...

  3. 手机html5 tap事件,HTML5触摸事件演化tap事件介绍

    触摸事件是移动浏览器特有的HTML5事件,虽然click事件在pc和移动端更通用,但是在移动端会出现300ms延迟,较为影响用户体验,300ms延迟来自判断双击和长按,因为只有默认等待时间结束以确定没 ...

  4. 检测触摸事件(用户触摸屏幕时提示信息)

    MainActivity.java继承Activity类并实现OnTouchListener接口 public class MainActivity extends Activity implemen ...

  5. iOS开发系列--触摸事件、手势识别、摇晃事件、耳机线控

    -- iOS事件全面解析 概览 iPhone的成功很大一部分得益于它多点触摸的强大功能,乔布斯让人们认识到手机其实是可以不用按键和手写笔直接操作的,这不愧为一项伟大的设计.今天我们就针对iOS的触摸事 ...

  6. h5滚动时侧滑出现_HTML5移动端触摸事件以及滑动翻页效果

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  7. html5 触摸 滚动,html5的触摸事件

    1.触摸事件有哪些 touchstart,touchmove,touchend 2.分别什么时候触发 touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发. touc ...

  8. 触摸事件中touchstar、touchmove、touchend、touchcancel事件应用方法及实例

    触摸事件中touchstar.touchmove.touchend.touchcancel事件应用方法及实例 一. 分享到: 前面我们介绍过移动设备中一些设备事件,例如手机旋转90度.倾斜等设置放置姿 ...

  9. 触摸事件中touchstart、touchmove、touchend、touchcancel事件应用方法及实例

    触摸事件中touchstar.touchmove.touchend.touchcancel事件应用方法及实例 一. 分享到: 前面我们介绍过移动设备中一些设备事件,例如手机旋转90度.倾斜等设置放置姿 ...

最新文章

  1. 【Go】Go基础(一):Hello World!
  2. linux centos rc.local 自启动无效 解决方法
  3. Serverless 工程实践 | 自建 Apache OpenWhisk 平台
  4. iOS之深入解析KVO的底层原理
  5. ASCII和Unicode编码
  6. 怎么把php查询到的值显示到下拉框中_RazorSQL for Mac(数据库工具查询)8.5.3
  7. python有什么证可以考1002python有什么证可以考_离python二级考还有十几天,吓的我赶紧买了本python教程...
  8. LQR控制算法推导以及简单分析
  9. 柳神(柳婼)PAT甲级题目链接
  10. java/php/net/python奖助学金评审管理系统设计
  11. 国美易卡管理云平台,国美易卡系统有扩展点
  12. Wishbone总线快速了解
  13. wps怎么画网络图_wps 流程图怎么画 WPS流程图绘制图解教程
  14. 查看linux版本32还是64位,查看linux系统版本是32位的还是64位的
  15. C语言——宏定义及保留n位小数
  16. 数字证书在密改项目中的作用与应用实现
  17. 第五人格手机游戏在PC上怎么玩?第五人格哪款模拟器好用?
  18. can总线隔离中继器、canbridge-100、CanRepeater的can波特率和滤波设置
  19. LintCode(M) 乱序字符串
  20. stm32mp15x环境搭建基于linux环境(上)

热门文章

  1. GB51309实施后对于消防应急照明和疏散指示系统在城市隧道应用中的影响
  2. 12年的测试前辈给学习软件测试的你几点建议
  3. 制作环球捕手系统商城
  4. layui input框列表显示默认历史搜索记录
  5. Linux环境fisheye+crucible安装与破解
  6. 树莓派3.5寸屏幕驱动安装
  7. 【iOS】—— 知乎日报第一周遇到的问题
  8. 场效应管调光电路图_简易V-MOSFET调光灯电路
  9. react梳理之(非)受控组件
  10. python判断变量是否被定义