1、三个常用的移动端事件
  ontouchstart 手指按下时触发
  ontouchmove 手指移动时触发
  ontouchend 手动抬起时触发

  注意:这些事件当作事件属性使用时,不兼容谷歌浏览器。

  解决方案是,使用 addEventListener()来注册这些移动端事件。

2、pc端事件和移动端事件的区别
  1)通过 on的方式添加touch事件,在谷歌浏览器下无效。
  2)pc端的鼠标事件,用在移动端使用时,会产生300毫秒的延迟。

3、移动事件对象 TouchEvent

  TouchEvent对象,是一个标准事件对象,它默认是事件处理程序的第一个参数。它描述了touch事件发生时的详细信息。

  获取手指信息:
    touches 当前屏幕上的手指列表
    targetTouches 当前元素上的手指列表
    changedTouches 触发当前事件的手指列表

  获取手指的个数:

    e.changedTouches.length

  相关坐标的获取:
    e.pageX / e.pageY 手指触屏时到网页顶部/左侧的距离。
    e.clientX / e.clientY 手指触屏时到窗口上侧/左侧的距离。
    obj.offsetLeft / obj.offsetTop 对象到定位父级的left/top值。

  获取触屏时坐标:
    e.changedTouches[0].pageX / e.changedTouches[0].pageY

  三个手指对象的区别:
    在touchend时获取手指列表,只能用 changedTouches。原因是当手指抬起时,touches和targetTouches就没有了,所以只能用changedTouches来获取手指列表。


(未完待续)

移动端Touch事件基础的更多相关文章

  1. H5案例分享:移动端touch事件判断滑屏手势的方向

    移动端touch事件判断滑屏手势的方向 方法一 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标 ...

  2. 原生js移动端touch事件实现上拉加载更多

    大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...

  3. 移动端 touch 事件的originalEvent

    对于移动端的触摸事件,我们通过touchstart.touchmove.touchend实现,PC端一般使用mousedown.mousemove.mouseup实现. 我们获取事件坐标,原生js获取 ...

  4. 移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法

    这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且to ...

  5. 移动端touch事件 || 上拉加载更多

    前言: 说多了都是泪,在进行项目开发时,在上拉加载更多实现分页效果的问题上,由于当时开发任务紧急,所以就百度找了各种移动端的上拉下拉 实现加载更多的插件.然后就留下了个坑:上拉加载的时候会由于用户错误 ...

  6. 移动端touch事件实现页面弹动--小插件

    动手之前的打盹 说实话真的是好久没有更新博客了,最近一直赶项目,身心疲惫:最关键的是晚上还要回去上一波王者,实在是忙啊! 这周下来,清闲了些许,或许是因为要到国庆的缘故吧,大家都显得无精打采.俗话说的 ...

  7. 移动端 Touch 事件

    在移动端页面开发时,常常会用到touch事件,比如左滑右滑的轮播等.常用的触摸事件有touchstart,touchmove,touchend. 每个事件包含下面三个用于跟踪虎摸的属性: touche ...

  8. 移动端touch事件封装

    <meta charset="utf-8"><meta name="viewport" content="width=device- ...

  9. 移动端--touch事件与点透问题

    也来说说touch事件与点击穿透问题: http://blog.csdn.net/alex8046/article/details/52299785

随机推荐

  1. Hibernate createQuery调用joincolumn

    1. Beans a. Version Bean package locationService.beans; import java.sql.Timestamp; import java.util. ...

  2. qt添加资源文件方法

    File->new file->file and classes->Qt->qt resources->   add name   add->add prefix- ...

  3. [原创]CentOS实现智能DNS

    一.       环境: Centos-6.6-x64位操作系统,IP地址:210.38.248.7 二.       安装和配置bind服务: 1.      命令:yum install bind ...

  4. Workout Wednesday Redux (2017 Week 3)

    I had started a "52 Vis" initiative back in 2016 to encourage folks to get practice making ...

  5. 前端向后台的华丽转身 — PHP入门篇

    三个月就这么悄悄溜走了,本K对于前端虽然有了一定的认识,但对一些方面还是处于一种比较萌币的状态,就在这种萌币状态下,本K又跟着大神浩开始了后台语言-PHP语言的学习.PHP的学习对于学过其他语言的人来 ...

  6. Python使用PyMysql操作数据库

    安装 pip install -U pymysql 连接数据库 连接数据库有两种不同的格式 直接使用参数 代码如下 import pymysql.cursors connection = pymysq ...

  7. Vue基础概念,学习环境等

    前提: 你已有 HTML.CSS 和 JavaScript 中级前端知识. 概念: Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vu ...

  8. eclipse 下,使用正常模式可以运行,DEBUG模式就卡住的解决方案

    最近开发的时候遇到一个问题,就是用运行就可以编译整个项目,但是使用debug模式就卡住了,编译一部分就不动了.开始我以为是项目太大的关系 但是也不至于就DEBUG不行,所以网上差了些资料,原来是DEB ...

  9. .NET Framework 各个版本介绍

    .NET Framework 1.1 自1.0版本以来的改进:自带了对mobile asp .net控件的支持.这在1.0版本是以附加功能方式实现的,现在已经集成到框架的内部.安全方面的变更 - 使得 ...

  10. 开始学习机器学习,从Ng的视频开始

    时隔开5个月,忙完了考研和毕设后终于有时间搞自己想搞得,研究生导师方向是图像处理与机器学习结合,重新开工 何为机器学习? 对于机器学习(Machine Learning)的定义大体上有两种,第一种是美 ...