Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

初探触屏设备的三个touch事件

  现在,触屏的设备越来越流行了,我们的网页如果还一直是停留在鼠标上肯定是不行的。所以,我们也要涉猎一些Mobile的东西。PC与Mobile最大的区别就是输入设备,这些设备在程序上的区别就是响应的事件不同。现在我们就来看看触屏基础的三个事件。
  touchstarttouchmovetouchend,这三个事件看名字就能知道他们是干什么的,touchstart和touchend就像鼠标事件中的mousedown和mouseup一样简单。touchmove也和mousemove差不多,但是有一个很大的区别。鼠标在网页上可以随便移动,但是触屏要想移动就必须触发一次touchstart才可以开始touchmove。因为你的手指要是没碰到屏幕是触不了屏的,但是一碰到就会触发touchstart。这些东西没什么的,慢慢适应就好。
  现在的触屏设备一般都支持多点触屏,这样就会长生很多个坐标。所以在触屏事件的事件对象中,坐标是存放在一个拟数组对象中的。也就是说,即使只有一个点的触屏,它也在这个拟数组中,只不过数组长度为1罢了。
  下面是实现一个旋转图片的例子。这个程序应该用手机访问,如果是手机用户可以点击这里来访问,PC端访问看不出啥效果的。手机用户可以用一个手指按住图片,另一个手指在其它地方移动。 <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN">
<style>img {position:absolute;top:100px;left:100px;}</style>
<img id="p" src="http://www.web-tinker.com/images/signet.png" />
<script>
//获取图片对象
var p=document.getElementById("p");
//声明一个全局对象,用来保存触屏的第一个点
var o;
//当用户的手指放到图片上时保存这个点
p.ontouchstart=function(e){
  o=e.touches[0];
};
//和ontouchstart一样
//但是touchend的时候touches[0]有可能不存在
//所以如果不存在的话就相当于删除这个保存的点
p.ontouchend=function(e){
  o=e.touches[0];
};
//触屏移动事件
window.ontouchmove=function(e){
  //保存下第二个点
  var s=e.touches[1]
  //如果第一个点是在图片上,并且第二个点存在
  if(o&&s){
    //从坐标计算旋转的角度
    var a=Math.atan2(
      s.clientY-o.clientY,
      s.clientX-o.clientX
    )/Math.PI*180;
    //让元素旋转
    p.style.WebkitTransform="rotate("+a+"deg)";
  }
  //阻止默认动作
  e.preventDefault();
};
</script>
  看完这个例子,对触屏事件的操作应该就没啥问题了。其实这个旋转的计算在手势事件中有封装的,但是不知道什么原因,在我的手机上手势事件怎么都不触发。所以也没办法调试,等下次搞明白了就再来扯手势事件。
网名:
34.203.213.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^