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>
  • 相关阅读:
    python day2 省市三级联动
    Dynamics CRM绑定表单查看当前表单的数据参数传递
    Dynamics CRM制作报表的时候让用户可以用自己的权限浏览数据
    Sql Server Report Service访问服务页面503解决方法
    Dynamics CRM报表无法访问提示“报表服务器无法访问或使用加密密钥。你可能需要将服务器添加到扩展组,或重新导入”
    Dynamics CRM报表点击自动运行方法
    C#委托的学习了解
    Google不兼容ShowModalDialog()弹出对话框的解决办法
    Dynamics CRM报表提示rsProcessingAborted解决方法
    Dynamics CRM邮箱配置
  • 原文地址:https://www.cnblogs.com/LChenglong/p/6740084.html
Copyright © 2011-2022 走看看