现在,触屏的设备越来越流行了,我们的网页如果还一直是停留在鼠标上肯定是不行的。所以,我们也要涉猎一些Mobile的东西。PC与Mobile最大的区别就是输入设备,这些设备在程序上的区别就是响应的事件不同。现在我们就来看看触屏基础的三个事件。
touchstart、touchmove、touchend,这三个事件看名字就能知道他们是干什么的,touchstart和touchend就像鼠标事件中的mousedown和mouseup一样简单。touchmove也和mousemove差不多,但是有一个很大的区别。鼠标在网页上可以随便移动,但是触屏要想移动就必须触发一次touchstart才可以开始touchmove。因为你的手指要是没碰到屏幕是触不了屏的,但是一碰到就会触发touchstart。这些东西没什么的,慢慢适应就好。
现在的触屏设备一般都支持多点触屏,这样就会长生很多个坐标。所以在触屏事件的事件对象中,坐标是存放在一个拟数组对象中的。也就是说,即使只有一个点的触屏,它也在这个拟数组中,只不过数组长度为1罢了。
下面是实现一个旋转图片的例子。这个程序应该用手机访问,如果是手机用户可以点击这里来访问,PC端访问看不出啥效果的。手机用户可以用一个手指按住图片,另一个手指在其它地方移动。
看完这个例子,对触屏事件的操作应该就没啥问题了。其实这个旋转的计算在手势事件中有封装的,但是不知道什么原因,在我的手机上手势事件怎么都不触发。所以也没办法调试,等下次搞明白了就再来扯手势事件。
本文来源于广州网站建设公司与广州网站设计制作公司-广帆互动广州公司!