您现在的位置:爱折腾>> web>>正文内容

详解移动触摸设备上的JavaScript事件方法

现在的手持设备越来越多,做网页设计不仅仅是在PC桌面浏览器,移动浏览器将会占很大的比例,有的人家里有电脑,但是他都不会用,一般都是使用手机娱乐,所以了解移动端的浏览器JavaScript事件至关重要。

今天这篇文章就来为大家详解移动触摸设备上的JavaScript事件方法。

触摸事件

目前的浏览器均支持以下的四种触摸事件:

  • ontouchstart
  • ontouchmove
  • ontouchend
  • ontouchcancel

前面三个都很好理解,但是最后一个似乎没什么用,其实不然,这个输入高级一点的使用方法,例如你正在触摸屏幕,但是这时候来了个电话,会自动弹出通话界面,触摸就被强制取消,一般会在触发ontouchcancel事件时暂停游戏、存档等操作。

由于触屏也支持MouseEvent,因此他们的顺序是需要注意的:touchstart → mouseover → mousemove → mousedown → mouseup → click1,这仅仅是一个按下的操作,中间有比较复杂的顺序,特别需要提到的是,只有再触发一个触屏事件时,才会触发上一个事件的mouseout事件。

使用触摸事件

上面介绍了触摸事件,接下来我们来看看如何使用,假设我们的页面上有一个DIV,而我们要给这个DIV绑定触摸事件,那么对于的代码如下。

var div = document.getElementById("div");
div.ontouchstart = function(e){
    var touch = e.touches[0];
    var x = touch.clientX;
    var y = touch.clientY;
};
div.ontouchmove = function(e){
    e.preventDefault();
};
div.ontouchup = function(e){
    //nothing to do
};

上面的代码中,我们在用户触摸开始的时候,获取触摸的坐标,事件的touches属性是一个数组,其中一个元素代表同一时刻的一个触控点,从而可以通过touches获取多点触控的每个触控点。

在用户触摸中但是还没有抬起手指的时候,我们阻止触摸时浏览器的缩放、滚动条滚动等操作

手势事件

手势是指利用多点触控进行旋转、拉伸等操作,例如图片、网页的放大、旋转。需要两个或以上的手指同时触摸时才会触发手势事件。关于缩放我们需要注意的一点是 元素的位置坐标:我们通常使用offsetX、getBoundingClientRect等方法获取元素的位置坐标。

但在手机浏览器中页面经常会在使用中被缩放,那缩放后的元素坐标会改变吗?

答案是有所差异。用一个情景来说明这个问题:页面A加载完成后,JavaScript获 取到该元素在document中的坐标为(100,100),接着用户放大了页面,此时用JavaScript再次输出元素坐标,依然还是 (100,100),但该元素在屏幕上的响应区域会根据缩放比例产生偏移。

你可以打开那个打砖块游戏demo,等页面完全加载完成后再放大,此时你会发现即使手指触摸在“touch here”区域外部,也可以控制到球板,因为区域发生了偏移。除非页面刷新或者恢复缩放,否则偏移量将一直存在。

使用触摸手势

var div = document.getElementById("div");
div.ongesturechange = function(e){
    var scale = e.scale;
    var angle = e.rotation;
};

scale代表手势产生的缩放比例,小于1是缩小,大于1是放大,原始为1,rotation代表旋转手势的角度,值区间[0,360],正值顺时针旋转,负值逆时针。

重力感应

重力感应较简单,只需要为body节点添加onorientationchange事件即可。在此事件中由window.orientation属性得到代表当前手机方向的数值。window.orientation的值列表如下:

  • 0:与页面首次加载时的方向一致
  • -90:相对原始方向顺时针转了90°
  • 180:转了180°
  • 90:逆时针转了90°

以上即目前的触屏事件,这些事件尚未并入标准,但已被广泛使用。

相关文章