注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

淡淡De影痕的博客

将来的你一定会感激现在拼命的自己。

 
 
 

日志

 
 
 
 

【转载】javaScript—触摸(touch)事件  

2014-06-12 14:19:15|  分类: JS初心向小结 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
智能手机以及平板电脑,在我们的生活中越来越重要,她们既没有鼠标也没有键盘,在为它们开发应用或网页时,常规的鼠标和键盘事件根本不够用。最开始ios提供了一些触摸(touch)操作相关的事件,当然现在Android也实现了相同的事件。现在W3C已经指定了Touch Events规范。那么到底添加了那些事件,该怎么用呢? 
触摸事件(touch)
touchstart:当手指触摸屏幕时;即使已经有一个手指放在了屏幕上也会触发。
touchmove:当手指在屏幕上滑动时连续地触发。在这个事件发生期间,调用preventDefat()可以阻止滚动。
touchend:当手指在屏幕上移开时触发。

这些事件都会冒泡,也都可以取消,并且兼容DOM。触摸事件还包含了用于跟踪触摸(touch)的属性:

touchs:表示当前跟踪的触摸操作的Touch对象的数组即当前位于屏幕上的所有手指的列表。
targetTouches:特定于事件目标的Touch对象数组即位于当前DOM元素上手指的列表。。
changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组即涉及当前事件手指的列表
每个touch包含的属性即每个触摸点由包含的触摸信息:
identifier:标识触摸的唯一ID,一个数值,唯一标识触摸会话中的当前手指。
target:触摸的DOM节点目标,也就是是动作所针对的目标。
clientX/clinntY:触摸目标在视口中的X/Y坐标。
pageX/pageY:触摸目标在页面中的X/Y坐标。
screenX/screenY:触摸目标在屏幕中的X/Y坐标。
看一个例子
HTML

<div class="box" id="box"></div>

css

.box{
height:50px;
width:50px;
background: red;
position:absolute;
}

script

var box = document.getElementById('box');
box.addEventListener('touchmove', function(event){
//如果这个元素的位置内只有一个手指的话
if (event.targetTouches.length == 1){
var touch = event.targetTouches[0];
// 把元素放在手指所在的位置
box.style.left = touch.pageX + 'px';
box.style.top = touch.pageY + 'px';
}
}, false);


  评论这张
 
阅读(16)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018