zoukankan      html  css  js  c++  java
  • touch事件应用

    js的touch事件,一般用于移动端的触屏滑动:
    $(function(){
      document.addEventListener("touchmove", _touch, false);}) function _touch(event){alert(1);
    }

    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节点坐标

    简单应用案例:

     1 <body>
     2         <span id="test_box" style="position:fixed;left:0px;top:0px;background-color:gainsboro;padding:15px;">123</span>
     3         <script>
     4 //            addEventListener() 方法用于向指定元素添加事件句柄。           使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。
     5 
     6             //document.addEventListener("touchstart",touch_start,false);
     7             //document.addEventListener("touchmove",touch_move,false);
     8             //document.addEventListener("touchend",touch_end,false);
     9             //document.addEventListener("touchcancel",touch_cancel,false);
    10             
    11             function touch_start(event){
    12                 alert("touch_start : 当手指触摸屏幕时触发")
    13             }
    14             
    15             function touch_move(event){
    16                 alert("touchmove : 当手指在屏幕上滑动时连续的触发。")
    17             }
    18             
    19             function touch_end(event){
    20                 alert("touchend : 当手指从屏幕上移开时触发")
    21             }
    22             
    23             function touch_cancel(event){
    24                 alert("touchcancel : 当系统停止跟踪触摸时触发。")
    25             }
    26             
    27             
    28             //应用示例,单个手指拖动盒子
    29             var obj = document.getElementById("test_box");
    30              obj.addEventListener('touchmove', function(event) 
    31              { // 如果这个元素的位置内只有一个手指的话
    32                 if (event.targetTouches.length == 1) 
    33                      {
    34                       var touch = event.targetTouches[0];
    35                        // 把元素放在手指所在的位置
    36                        obj.style.left = touch.pageX + 'px';
    37                          obj.style.top = touch.pageY + 'px';
    38                       }
    39             }, false);
    40         </script>
    41     </body>
  • 相关阅读:
    numpy数组各种乘法
    python测试函数的使用时间
    dataframe 列名重新排序
    《图解设计模式》读书笔记5-1 composite模式
    《图解设计模式》读书笔记4-2 STRATEGY模式
    《图解设计模式》读书笔记4-1 Bridge模式
    《图解设计模式》读书笔记3-3 Builder模式
    《图解设计模式》读书笔记3-2 Prototype模式
    《图解设计模式》读书笔记3-1 Singleton模式
    《图解设计模式》读书笔记2-2 Factory Method模式
  • 原文地址:https://www.cnblogs.com/LChenglong/p/6740084.html
Copyright © 2011-2022 走看看