Apr 3, 2014 - javascript, 前端    No Comments

对于移动端浏览器touch事件的研究总结(1)

最基本的4种触摸事件:

  • touchstart : 手指触摸屏幕时触发
  • touchmove : 手指在屏幕上滑动时触发
  • touchend : 手指离开屏幕时触发
  • touchcancel : 系统取消touch事件的时候触发。(例如你在浏览器里玩HTML5的游戏,这个时候你女朋友打电话进来了,就会触发touchcancel事件,游戏的作者就可以在这里做暂停游戏、自动存档等操作)

每个触摸事件都包括了三个触摸列表:

  • touches : 当前位于屏幕上的所有手指动作的列表
  • targetTouches : 位于当前 DOM 元素上的手指动作的列表
  • changedTouches : 涉及当前事件的手指动作的列表。例如,在一个 touchend 事件中,这将是移开手指


这些列表由包含触摸信息的对象组成:

  • identifier : 一个数值,touch对象的unique ID ,唯一标识触摸会话(touch session)中的当前手指
  • target : DOM元素,是动作所针对的目标
  • clientX / clientY : 触摸点相对于浏览器窗口viewport的位置,不包含滚动距离
  • pageX / pageY : 触摸点相对于页面的位置,包含滚动距离
  • screenX / screenY : 触摸点相对于屏幕的位置
  • radiusX/radiusY/rotationAngle : 画出大约相当于手指形状的椭圆形,分别为椭圆形的两个半径和旋转角度。(目前还没有得到的广泛的支持)

一个例子看清touch事件对象的所有属性,
Html:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>一个例子看清touch事件对象的所有属性</title>
    </head>
    <body style="margin:0;padding:0; background:#eee;">
        <div id="text">
            <p class="att clintX">
            clintX: <span></span>
            </p>
            <p class="att clintY">
            clintY: <span></span>
            </p>
            <p class="att pageX">
            pageX: <span></span>
            </p>
            <p class="att pageY">
            pageY: <span></span>
            </p>
            <p class="att screenX">
            screenX: <span></span>
            </p>
            <p class="att screenY">
            screenY: <span></span>
            </p>
            <p class="att identifier">
            identifier: <span></span>
            </p>
            <p class="att target">
            target: <span></span>
            </p>
        </div>
    </body>
</html>

css:

#text {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    border: 1px solid #333;
}

javascript:

var windowHeight = window.innerHeight; 
document.body.style.height = windowHeight * 2 + "px";
$("body").on("touchstart", function(e) {
    $("#text .clintX span").text("").text(e.originalEvent.targetTouches[0].clientX);
    $("#text .clintY span").text("").text(e.originalEvent.targetTouches[0].clientY);
    $("#text .pageX span").text("").text(e.originalEvent.targetTouches[0].pageX);
    $("#text .pageY span").text("").text(e.originalEvent.targetTouches[0].pageY);
    $("#text .screenX span").text("").text(e.originalEvent.targetTouches[0].screenX);
    $("#text .screenY span").text("").text(e.originalEvent.targetTouches[0].screenY);
    $("#text .identifier span").text("").text(e.originalEvent.targetTouches[0].identifier);
    $("#text .target span").text("").text(e.originalEvent.targetTouches[0].target);
});

在线测试地址:移动设备请访问:http://aresli.com/demo/touch-event/touch1.html

  1. 首先页面加载后在屏幕上随便点击,可以看到clientX/clientY和pageX/pageY和screenX/screenY是三组一模一样是数值。
  2. 然后稍微拖动点滚动条,可以看到只有pageX/pageY和screenX/screenY的值是相同的了。
  3. 然后双指放大页面,再随意点击,这时三组数值都不尽相同了。

而且可以发现放大页面对页面上得取值影响是很大的。所以在作一些web项目的时候,还是要尽可能的一上来就禁止缩放。

禁止缩放的meta代码是:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

还有一个会影响取值的行为就是浏览器的touchmove的默认行为。例如经典的 iOS overscroll 特效,会在滚动超出内容的界限时引发视图反弹。这种做法在很多的多点触控应用程序中会带来混乱,不过很容易就能停用:

document.body.addEventListener('touchmove', function(event) {
    event.preventDefault();
}, false);

Got anything to say? Go ahead and leave a comment!