移動端的觸摸

標籤：

移動端文本開發，jq專門針對手機觸摸有其對應的事件，這些事件有了：

touchstart //觸控螢幕幕瞬間

touchend //觸控螢幕幕離開之後

touchmove //在螢幕上滑動

touchcancle //處理一些接電話之類的功能，取消當前的觸摸效果

觸摸事件(touch)

使用iPhone時你可以使用手指代替滑鼠，最酷的是支援多點觸摸，在iPhone上滑鼠事件被觸摸事件替代了，包括：

    touchstart
    touchend
    touchmove
    touchcancel

當你發出這些事件時，事件監聽器將會接收一個event對象，event對象有些重要的熟悉，如：

    touches：觸摸對象的集合，觸控螢幕幕的每個手指一個，touch對象有pageX和pageY屬性，包含了在頁面上觸摸的座標。
    targetTouches：和touches類似，但它只登記對目標元素的觸摸，而不是整個頁面。

下面的例子是拖放的一個簡單實現，我們在空白頁面上放一個方框，然後進行拖動，你需要的做的就是訂閱touchmove事件，然後隨手指移動更新方框的位置，如：
    window.addEventListener(‘load‘, function() {
        var b = document.getElementById(‘box‘),
        xbox = b.offsetWidth / 2, // half the box width
        ybox = b.offsetHeight / 2, // half the box height
        bstyle = b.style; // cached access to the style object
    
        b.addEventListener(‘touchmove‘, function(event) {
            event.preventDefault(); // the default behaviour is scrolling
            bstyle.left = event.targetTouches[0].pageX - xbox + ‘px‘;
            bstyle.top = event.targetTouches[0].pageY - ybox + ‘px‘;
        }, false);
    }, false);

 

移動端的觸摸