移动端Touch事件基础
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事件基础的更多相关文章
- H5案例分享:移动端touch事件判断滑屏手势的方向
移动端touch事件判断滑屏手势的方向 方法一 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标 ...
- 原生js移动端touch事件实现上拉加载更多
大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...
- 移动端 touch 事件的originalEvent
对于移动端的触摸事件,我们通过touchstart.touchmove.touchend实现,PC端一般使用mousedown.mousemove.mouseup实现. 我们获取事件坐标,原生js获取 ...
- 移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法
这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且to ...
- 移动端touch事件 || 上拉加载更多
前言: 说多了都是泪,在进行项目开发时,在上拉加载更多实现分页效果的问题上,由于当时开发任务紧急,所以就百度找了各种移动端的上拉下拉 实现加载更多的插件.然后就留下了个坑:上拉加载的时候会由于用户错误 ...
- 移动端touch事件实现页面弹动--小插件
动手之前的打盹 说实话真的是好久没有更新博客了,最近一直赶项目,身心疲惫:最关键的是晚上还要回去上一波王者,实在是忙啊! 这周下来,清闲了些许,或许是因为要到国庆的缘故吧,大家都显得无精打采.俗话说的 ...
- 移动端 Touch 事件
在移动端页面开发时,常常会用到touch事件,比如左滑右滑的轮播等.常用的触摸事件有touchstart,touchmove,touchend. 每个事件包含下面三个用于跟踪虎摸的属性: touche ...
- 移动端touch事件封装
<meta charset="utf-8"><meta name="viewport" content="width=device- ...
- 移动端--touch事件与点透问题
也来说说touch事件与点击穿透问题: http://blog.csdn.net/alex8046/article/details/52299785
随机推荐
- kafka 0.10.2 解决java无法生产消息到指定topic问题
主要是修改server.properties的advertised.listeners advertised.listeners=PLAINTEXT://192.168.59.132:9092
- (数字IC)低功耗设计入门(六)——门级电路低功耗设计优化
三.门级电路低功耗设计优化 (1)门级电路的功耗优化综述 门级电路的功耗优化(Gate Level Power Optimization,简称GLPO)是从已经映射的门级网表开始,对设计进行功耗的优化 ...
- 实现分布式队列ZooKeeper的实现
一.背景 有一些时候,多个团队需要共同完成一个任务,比如,A团队将Hadoop集群计算的结果交给B团队继续计算,B完成了自己任务再交给C团队继续做.这就有点像业务系统的工作流一样,一环一环地传下去,直 ...
- Windows平台下python2和3的兼容问题解决
很多朋友都安装了python2和3,因为用些库例如scapy,不是scrapy,python3下面都是错,那么怎么让python2和3共存呢. 像一般的程序员,达到如下效果 Windows平台下的兼容 ...
- Ace Admin 使用教程
(原) 公司项目要换框架,然后丢了一套国外的给我,ace admin,本想着拿来改改,翻翻百度就能用的,可它是国外的啊,国内普及率又不高,没办法,硬着头皮一点点啃英文文档吧. File(文件) 简介: ...
- [HDU1000] A + B Problem
Problem Description Calculate A + B. Input Each line will contain two integers A and B. Process to e ...
- Qt之新手打包发布程序
工具:电脑必备.QT下的windeployqt Qt 官方开发环境使用的动态链接库方式,在发布生成的exe程序时,需要复制一大堆 dll,如果自己去复制dll,很可能丢三落四,导致exe在别的电脑里无 ...
- 从零开始理解JAVA事件处理机制(2)
第一节中的示例过于简单<从零开始理解JAVA事件处理机制(1)>,简单到让大家觉得这样的代码简直毫无用处.但是没办法,我们要继续写这毫无用处的代码,然后引出下一阶段真正有益的代码. 一:事 ...
- C++抽象编程·运算符重载与友元函数
运算符重载(Operator overloading) 从我们在几个前篇的类的层次介绍中可以知道,C++可以扩展标准运算符,使其适用于新类型.这种技术称为运算符重载. 例如,字符串类重载+运算符,使其 ...
- Web前端性能优化全攻略
网页制作poluoluo文章简介:Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多网站无情忽视的技术. Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多 ...