touch事件应用

来源：互联网发布：大数据在保险行业应用编辑：程序博客网时间：2024/06/15 01:23

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>

阅读全文

0 0