H5移动端触摸事件：touchstart、touchend、touchmove
时间： 18:37:31
&&&& 阅读：201
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&第一部分代码事例：
&html&&head&
&meta charset="utf-8"&
#main,#main1{
height:500
&script type="text/javascript"&
function load (){
var oInp = document.getElementById("main1");
oInp.addEventListener(‘touchstart‘,touch, false);
oInp.addEventListener(‘touchmove‘,touch, false);
oInp.addEventListener(‘touchend‘,touch, false);
function touch (event){
var event = event || window.
switch(event.type){
case "touchstart":
oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
case "touchend":
oInp.innerHTML = "&br/&Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
case "touchmove":
event.preventDefault();
oInp.innerHTML = "&br/&Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
window.addEventListener(‘load‘,load, false);
&/script&&/head&
&p id="main1"&请在文档中点击。一个消息框会提示出鼠标指针的 x 和 y 坐标。&/p&
&/body&&/html&
第二部分代码事例：移动端左右滑动页面切换测试代码
document.querySelector(".page2").addEventListener("touchstart", function (e1) {
e1.preventDefault();
console.log(e1)
var touch1 = e1.touches[0];
var startX = touch1.pageX;
document.querySelector(".page2").addEventListener("touchmove", function (e2) {
e2.stopPropagation();
var touch2 = e2.touches[0];
var Xc = touch2.pageX - startX;
document.querySelector(".page2").addEventListener("touchend", function (e3) {
e3.preventDefault();
if (Xc & 40) {
$(".page2").animate({
left: "640px",
width:"0px"
$(".page3").show();
$(".now-check").addClass("chRotate");
clearTimeout(timer1);
})标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&国之画&&&& &&&&chrome插件
版权所有 京ICP备号-2
迷上了代码！HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)
HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件：touchstart、touchmove和touchend。
一开始触摸事件touchstart、touchmove和touchend是iOs版Safari为了向开发人员传达一些信息新添加的事件。因为iOs设备既没有鼠标也没有键盘，所以在为移动Safari浏览器开发交互性网页的时候，PC端的鼠标和键盘事件是不够用的。
在iPhone 3Gs发布的时候，其自带的移动Safari浏览器就提供了一些与触摸(touch)操作相关的新事件。随后，上的浏览器也实现了相同的事件。触摸事件(touch)会在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候出发。下面具体说明：
touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。
touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。
touchend事件：当手指从屏幕上离开的时候触发。
touchcancel事件：当停止跟踪触摸的时候触发。关于这个事件的确切出发时间，文档中并没有具体说明，咱们只能去猜测了。
上面的这些事件都会冒泡，也都可以取消。虽然这些触摸事件没有在DOM规范中定义，但是它们却是以兼容DOM的方式实现的。所以，每个触摸事件的event对象都提供了在鼠标实践中常见的属性：bubbles(起泡事件的类型)、cancelable(是否用 preventDefault() 方法可以取消与事件关联的默认动作)、clientX(返回当事件被触发时，鼠标指针的水平坐标)、clientY(返回当事件触发时，鼠标指针的垂直坐标)、screenX(当某个事件被触发时，鼠标指针的水平坐标)和screenY(返回当某个事件被触发时，鼠标指针的垂直坐标)。除了常见的DOM属性，触摸事件还包含下面三个用于跟踪触摸的属性。
touches：表示当前跟踪的触摸操作的touch对象的数组。
targetTouches：特定于事件目标的Touch对象的数组。
changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。
每个Touch对象包含的属性如下。
clientX：触摸目标在视口中的x坐标。
clientY：触摸目标在视口中的y坐标。
identifier：标识触摸的唯一ID。
pageX：触摸目标在页面中的x坐标。
pageY：触摸目标在页面中的y坐标。
screenX：触摸目标在屏幕中的x坐标。
screenY：触摸目标在屏幕中的y坐标。
target：触目的DOM节点目标。
上面的属性光这么看，果然非常繁琐，每个属性说的都是那么的细致，只有真刀实枪的来点小例子才能更加明白其中的奥妙。所以小例子如下。
Script代码
function load (){
&&&&document.addEventListener('touchstart',touch,false);
&&&&document.addEventListener('touchmove',touch,false);
&&&&document.addEventListener('touchend',touch,false);
&&&&function touch (event){
&&&&&&&&var event = event || window.
&&&&&&&&var oInp = document.getElementById(&inp&);
&&&&&&&&switch(event.type){
&&&&&&&&&&&&case&&touchstart&:
&&&&&&&&&&&&&&&&oInp.innerHTML =&Touch started (&&+ event.touches[0].clientX +&,&&+ event.touches[0].clientY +&)&;
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&case&&touchend&:
&&&&&&&&&&&&&&&&oInp.innerHTML =&&br&Touch end (&&+ event.changedTouches[0].clientX +&,&&+ event.changedTouches[0].clientY +&)&;
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&case&&touchmove&:
&&&&&&&&&&&&&&&&event.preventDefault();
&&&&&&&&&&&&&&&&oInp.innerHTML =&&br&Touch moved (&&+ event.touches[0].clientX +&,&&+ event.touches[0].clientY +&)&;
&&&&&&&&&&&&&&&&
window.addEventListener('load',load,false);
&div id=&inp&&&/div&
上面的小例子。当touchstart事件触发的时候，会将触摸的位置更新到div标签中。当touchmove事件触发的时候，会默认行为的滚动(触摸移动的默认行为是滚动页面)，然后触摸操作的变化信息更新到div标签中。而touchend事件会输出有关触摸操作的最终信息。注意，在touchend事件触发的时候，touches集合中就没有任何Touch对象了，因为不存在活动的触摸操作。
这些事件会在文档的所有元素上面触发，因而可以分别操作页面的不同部分。在触摸屏幕上的元素，这些事件(包括鼠标事件)发生的顺序如下：
(1)touchstart
(3)mousemove(一次)
(4)mousedown
(5)mouseup
(7)touchend
介绍了这么多，这些触摸事件的兼容情况怎么样呢?支持触摸事件(touchstart、touchmove和touchend)的浏览器有：iOs版Safari、Android版WebKit、bada版Dolfin、OS6+中的BlackBerry WebKit、Opera Mobile 10.1+和LG专有OS中的Phantom浏览器。目前只有iOs版Safari支持多点触摸。PC版Firefox 6+ 和Chrome也支持触摸事件。
HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)就为大家介绍到这里了，今天主要为大家介绍了些浏览器兼容支持的情况还不错的触摸事件。日后若有兼容不错的事件，再继续介绍。更多有关HTML5实战与剖析的相关知识，敬请关注梦龙小站的相关更新。​温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
第一次认识你是偶然,第二次见到你是必然,第三次相遇是命中注定。
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
//竖屏时样式
@media all and (orientation:portrait){
//横屏时样式
@media all and (orientation:landscape){
}8：）audio元素和video元素在ios和andriod中无法自动播放 //音频，写法一
&audio src="/lzyi_117/music/bg.mp3" autoplay loop controls&你的浏览器还不支持哦&/audio&
//音频，写法二
&audio controls="controls"&
&source src="/lzyi_117/music/bg.ogg" type="audio/ogg"&&/source&
&source src="/lzyi_117/music/bg.mp3" type="audio/mpeg"&&/source&
优先播放音乐bg.ogg，不支持在播放bg.mp3
//JS绑定自动播放（操作window时，播放音乐）
$(window).one('touchstart', function(){
music.play();
//微信下兼容处理
document.addEventListener("WeixinJSBridgeReady", function () {
music.play();
}, false);//小结
//1.audio元素的autoplay属性在IOS及Android上无法使用，在PC端正常//2.audio元素没有设置controls时，在IOS及Android会占据空间大小，而在PC端Chrome是不会占据任何空间9：）重力感应事件 // 运用HTML5的deviceMotion，调用重力感应事件
if(window.DeviceMotionEvent){
document.addEventListener('devicemotion', deviceMotionHandler, false)
var speed = 30;
var x = y = z = lastX = lastY = lastZ = 0;
function deviceMotionHandler(eventData){
var acceleration = event.accelerationIncludingG
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
if(Math.abs(x-lastX)&speed || Math.abs(y-lastY)&speed || Math.abs(z-lastZ)&speed ){
//这里是摇动后要执行的方法
yaoAfter();
function yaoAfter(){
//do something
//说明：说见案例摇一摇效果中yao.js10：）微信浏览器用户调整字体大小后页面矬了，怎么阻止用户调整 //以下代码可使Android机页面不再受用户字体缩放强制改变大小，但是会有1S左右延时，期间可以考虑loading来处理
if (typeof(WeixinJSBridge) == "undefined") {
document.addEventListener("WeixinJSBridgeReady", function (e) {
setTimeout(function(){
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize':0}, function(res){
alert(JSON.stringify(res));
setTimeout(function(){
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize':0}, function(res){
alert(JSON.stringify(res));
//IOS下可使用 -webkit-text-size-adjust禁止用户调整字体大小
body { -webkit-text-size-adjust:100%! }
//最好的解决方案：最好使用rem或百分比布局11：）定位的坑//fixed定位
//1.ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位
//2.android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位
//3.ios4下不支持position:fixed
//解决方案：使用[Iscroll](http://cubiq.org/iscroll-5)，如：
&div id="wrapper"&
&script src="/lzyi_117/iscroll.js"&&/script&
function loaded(){
myscroll=new iScroll("wrapper");
window.addEventListener("DOMContentLoaded",loaded,false);
//position定位
//Android下弹出软键盘弹出时，影响absolute元素定位
//解决方案:
var ua = navigator.userAgent.indexOf('Android');
if(ua&-1){
$('.ipt').on('focus', function(){
$('.css').css({'visibility':'hidden'})
}).on('blur', function(){
$('.css').css({'visibility':'visible'})
}12：）播放视频不全屏 &!--
1.ios7+支持自动播放
2.支持Airplay的设备（如：音箱、Apple TV)播放
x-webkit-airplay="true"
3.播放视频不全屏
webkit-playsinline="true"
--&&video x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://"&&/video&13：）android android 2.3 bug //1.@-webkit-keyframes 需要以0%开始100%结束，0%的百分号不能去掉
//2.after和before伪类无法使用动画animation
//3.border-radius不支持%单位，如要兼容，可以给radius设置一下较大的值
//4.translate百分比的写法和scale在一起会导致失效，例如：
-webkit-transform: translate(-50%,-50%) scale(-0.5, 1)；android 4.x bug//1.三星 Galaxy S4中自带浏览器不支持border-radius缩写
//2.同时设置border-radius和背景色的时候，背景色会溢出到圆角以外部分
//3.部分手机(如三星)，a链接支持鼠标:visited事件，也就是说链接访问后文字变为紫色
//4.android无法同时播放多音频audio消除transition闪屏.css {
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility:
-webkit-perspective: 1000;
}其他：开启硬件加速 //目前，像Chrome/Filefox/Safari/IE9+以及最新版本Opera都支持硬件加速，当检测到某个DOM元素应用了某些CSS规则时就会自动开启，从而解决页面闪白，保证动画流畅。
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}渲染优化 //1.禁止使用iframe（阻塞父文档onload事件）
//2.禁止使用gif图片实现loading效果（降低CPU消耗，提升渲染性能）
//使用CSS3代码代替JS动画；
//开启GPU加速；
//使用base64位编码图片(不小图而言，大图不建议使用)
// 对于一些小图标，可以使用base64位编码，以减少网络请求。但不建议大图使用，比较耗费CPU。小图标优势在于：
//1.减少HTTP请求；
//2.避免文件跨域；
//3.修改及时生效；
阅读(520)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_',
blogTitle:'H5移动端页面常见兼容问题及解决方案(2)',
blogAbstract:'1:)移动端click屏幕产生200-300ms的延时响应以下是历史原因，来源一个公司内一个同事的分享：2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，示在手机端上，使用了双击缩放(double tap to zoom)的方案，，比如你在手机上用浏览器打开一个PC上的网页，你可能在看到页面内容虽然可以撑满整个屏幕，但是字体、图片都很小看不清，此时可以快速双击屏幕上的某一部分，你就能看清该部分放大后的内容，再次双击后能回到原始状态。双击缩放是指用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接&a href=\"http://blo',
blogTag:'',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:0,
publishTime:5,
permalink:'blog/static/',
commentCount:0,
mainCommentCount:0,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'第一次认识你是偶然,第二次见到你是必然,第三次相遇是命中注定。',
hmcon:'1',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}[HTML5] 移动端触屏网页的触摸事件 | IT知识库
-& 正文阅读
[HTML5]移动端触屏网页的触摸事件
移动端触屏网页的触摸事件
PC端网页从无到有发展至今，人们习惯了鼠标与键盘的人机交互模式，因此在PC端网页开发中一般使用鼠标事件和键盘事件。mouse事件：onclick事件：在单击鼠标左键或右键时发生。ondoubleclick事件：在双击鼠标左键时发生。onmousedown事件在单击鼠标按钮（左键、右键或中键）并且尚未松开时发生。onmousemove事件：在鼠标光标移动时发生。onmouseup事件：在松开鼠标按钮（左键、右键或中键）时发生。onmouseover事件：在鼠标光标移动到对象上时发生。onmouseout事件：在鼠标光标离开对象时发生。ommousewheel事件：在移动鼠标滚轮时发生。keyboard事件：onkeypress事件：按下并释放某个键进时发生。onkeydown事件：按键后（释放该键之前）发生。onkeyup事件：释放某键时发生。随着科技的发展，触屏设备越来越多，触屏设备的人机交互模式（包含多点触控技术）有点击、双击、拖拽、轻划、缩小、放大、按压、双指点击、按住拖拽、旋转等详见移动交互小白的学习笔记&&手势篇。&现在，触摸、传统鼠标、键盘三种交互模式并存。Web开发人员需要确保网站适应这三种交互模式。今天这里只介绍几种普及得比较好的触摸事件，你可以在绝大多数现代浏览器中来测试这一事件（必须是触屏设备哦）：touchstart：在用户的手指触摸屏幕的瞬间触发。touchmove：在用户移动手指的过程中连续触发。touchend：用户的手指离开屏幕的瞬间触发。touchcancel：其含义取决于浏览器。touchcancel我承认我不太明白touchcancel事件。touchcancel在触摸序列被取消时触发。但是这意味着什么完全取决于浏览器的实现：Chrome浏览器在用户的手指离开屏幕的瞬间触发touchcancel事件，但其他大多数浏览器则没有。幸运的是，我还没有发现必须使用touchcancel的情景。貌似其他脚本和库也几乎没有使用 touchcancel。有些代码为了安全起见，把它等同于touchend。而每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的一系列触摸点（用来实现多点触控）：touches：当前位于屏幕上的所有手指的列表。targetTouches：位于当前DOM元素上手指的列表。changedTouches：涉及当前事件手指的列表。每个触摸点由包含了如下触摸信息（常用）：identifier：一个数值，唯一标识触摸会话（touch session）中的当前手指。一般为从0开始的流水号（android4.1，uc）target：DOM元素，是动作所针对的目标。pageX/pageX/clientX/clientY/screenX/screenY：一个数值，动作在屏幕上发生的位置（page包含滚动距离,client不包含滚动距离，screen则以屏幕为基准）。　radiusX/radiusY/rotationAngle：画出大约相当于手指形状的椭圆形，分别为椭圆形的两个半径和旋转角度。等价事件目前这两种交互模式都有自己的一套事件，但这并不意味着它们是完全无关且不同的。事实上，某些事件是等价的。下面的表格给出了这方面的情况。
很显然，触摸动作序列：touchstart-touchmove-touchend和鼠标序 列：mousedown-mousemove-mouseup以及键盘序列：keydown-keypress-keyup很相似，这并不是巧合，因为这 三种交互模式都可以描述为start-move-stop。但是，有时候两个操作模式很像，但第三个却不。比如在下拉菜单的例子里，鼠标和键盘很像，而触摸不同。在拖放实例中，鼠标和触摸几乎一致，但键盘非常不同。在滚动层的例子里，这三种操作模式完全不同。最后是mouseover和mouseout的问题。focus和blur是它们的键盘模式的等价事件，但是触摸模式没有这样的等价事件。就像我们在&CSS&一章看到的，在触摸屏设备中不存在&悬停&。触摸事件的不同之处可以看出，等价事件确实存在，这取决于上下文。但是触摸、按键和鼠标事件并不完全相同。当鼠标指针移入某个元素，或者用户按下某个鼠标按键时，系统可以立即判断出应该触发哪个事件。而对于 触摸操作来说就不同了，触摸操作可以引出不同的动作：在你的手指触碰屏幕的瞬间，系统还无法判断出你的意图。你只是想轻触（Tap）某个元素？还是想滚动 某个可滚动元素？亦或是想缩放？还是想双触（Double-Tap）？浏览器必须等待一定时间间隔才能做出判断。这个时间间隔并不是非常短，而是一个可察 觉的间隔。能否合并触摸事件与鼠标事件我们发现，通常情况下鼠标事件和触摸事件非常相似，但是二者还是有一些本质区别的。有了这个认识，我们就可以更好地理解微软的指针事件，以及为什么会提出指针事件。微软认为没有必要分出鼠标、触摸两种事件。不管是鼠标指针、手指（触摸）还是触控笔（也叫定位笔），统称为指针，只要通过这些指针改变了些什么，就触发指针事件。所以，下面是微软版本的等价事件
现在我们有了两种事件分类方式：鼠标、触摸分离的苹果版本；鼠标、触摸整合的微软版本。到目前为止， 只有IE支持微软的版本。其他浏览器都支持苹果版本。又如我们在前面看到的，Mozilla和Google正在考虑实现指针事件 （PointerEvent）。所以未来情况可能还会发生变化。本文参考&移动Web之触摸和指针事件详解
加: 01:22:30&
更: 15:31:30&
&&网站联系: qq: email:&