• js的touch事件


    相应的事件有:

    touchstart:当手指触摸屏幕时触发;即使已经有一个手指放在了屏幕上也会触发。
    touchmove:当手指在屏幕上滑动时连续的触发。在这个事件发生期间,调用preventDefault()可阻止滚动。
    touchend:当手指从屏幕上移开时触发。
    touchcancel:当系统停止跟踪触摸时触发。关于此事件的确切触发事件,文档中没有明确说明。

    以上事件的event对象上面都存在如下属性:
    touches:表示当前跟踪的触摸操作的Touch对象的数组。
    targetTouches:特定于事件目标的Touch对象的数组。
    changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。

    每个Touch对象包含下列属性:
    clientX:触摸目标在视口中的X坐标。
    clientY:触摸目标在视口中的Y坐标。
    identifier:表示触摸的唯一ID。
    pageX:触摸目标在页面中的x坐标。
    pageY:触摸目标在页面中的y坐标。
    screenX:触摸目标在屏幕中的x坐标。
    screenY:触摸目标在屏幕中的y坐标。
    target:触摸的DOM节点坐标

    下面是实现的一个在ios上的touch例子,效果是一个红方块跟随手指移动:

    var canvas = document.getElementById('canvas'),
        spirit, startX, startY;
    
    function touchStart(event) {
        event.preventDefault();
        if (spirit || !event.touches.length) return;
        var touch = event.touches[0];
        startX = touch.pageX;
        startY = touch.pageY;
        spirit = document.createElement('div');
        spirit.className = 'spirit';
        spirit.style.left = startX + 'px';
        spirit.style.top = startY + 'px';
        canvas.appendChild(spirit);
    }
    canvas.addEventListener('touchstart', touchStart, false);
    
    function touchMove(event) {
        event.preventDefault();
        if (!spirit || !event.touches.length) return;
        var touch = event.touches[0],
            x = touch.pageX - startX,
            y = touch.pageY -  startY;
        spirit.style.webkitTransform = 'translate(' + x + 'px, ' + y + 'px)';
    
    }
    canvas.addEventListener('touchmove', touchMove, false);
    
    function touchEnd(event) {
        if(!spirit) return;
        canvas.removeChild(spirit);
        spirit = null;
    }
    
    canvas.addEventListener('touchend', touchEnd, false);

    页面上:

    <!DOCTYPE html>
    <html style=" 100%;height: 100%;">
    <head>
        <title></title>
        <!--启用viewport-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <style type="text/css">
        .spirit {
            /* 方块的class名称*/
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: red;
        }
        </style>
    </head>
    <body style="height: 100%;margin:0;padding:0">
        <div id="canvas" style="position: relative;100%;height: 100%;"></div>
    </body>
    </html>
  • 相关阅读:
    jprofiler配置
    Nginx编译安装
    WebBench的安装与使用
    你经常看到却经常忽视的__init__.py有什么用?
    彻底搞懂Python 中的 import 与 from import
    实现有过期时间的LRU缓存
    实现函数调用结果的 LRU 缓存
    elasticsearch Routing 路由详解
    Elasticsearch _reindex 接口来重新索引数据到新索引,使用新的配置
    浏览器操作elasticsearch别名
  • 原文地址:https://www.cnblogs.com/johnzhu/p/6514775.html
Copyright © 2020-2023  润新知