HTML5觸摸屏touch事件使用實例1

1.源碼：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1" />

<style>
.divFixed {
    width: 100px;
    height: 100px;
    font-size: 15px;
    text-align: center;
    border: 2px solid red;
    position: fixed;
}
</style>

 

    <div class="divFixed" id="divOne"></div>
    <script>
        var divOne = document.getElementById('divOne');
        var isMove = false;
        var oldX = oldY = 0;
        divOne.addEventListener('touchstart', function (e) {
            if (e.targetTouches.length == 1) {
                var touch = e.targetTouches[0];
                isMove = true;
                oldX = touch.pageX;
                oldY = touch.pageY;
                divOne.style.background = "gray";
            }
        }, false);
        divOne.addEventListener('touchmove', function (e) {
            if (e.targetTouches.length == 1) {
                var touch = e.targetTouches[0];
                if (isMove) {
                    var curX = touch.pageX;
                    var curY = touch.pageY;

                    divOne.style.left = divOne.offsetLeft + (curX - oldX) + 'px';
                    divOne.style.top = divOne.offsetTop + (curY - oldY) + 'px';

                    oldX = curX;
                    oldY = curY;
                }
            }
            //禁用默認操作
            e.preventDefault();
        });
        divOne.addEventListener('touchend', function (e) {
            if (e.changedTouches.length == 1) {
                var touch = e.changedTouches[0];
                isMove = false;
                oldX = oldY = 0;
                divOne.style.background = "transparent";
            }
        }, false);

        //禁止整個頁面觸屏，而移動（如：QQ瀏覽器的頁面左右切換）
        window.addEventListener('touchmove', function (e) {
            e.preventDefault();
        }, false);
    </script>

2.顯示結果：