touch事件应用
分类:美高梅-运维

一开始做前端页面的时候,接触的也是js,但是随后便被简单高效的jquery吸引过去,并一直使用至今。

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

而js,则被我主观的认为底层技术而抛弃。

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

直到这几天工作需要,研究移动端页面的触屏滑动事件,搜索jquery 的相应技术支持实在繁琐,而js只需几步简单定义即可。

以上事件的event对象上面都存在如下属性:
touches:表示当前跟踪的触摸操作的Touch对象的数组。
targetTouches:特定于事件目标的Touch对象的数组。
changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。
每个Touch对象包含下列属性:
clientX:触摸目标在视口中的X坐标。
clientY:触摸目标在视口中的Y坐标。
identifier:表示触摸的唯一ID。
美高梅4858官方网站,pageX:触摸目标在页面中的x坐标。
pageY:触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
美高梅网站是多少,screenY:触摸目标在屏幕中的y坐标。
target:触摸的DOM节点坐标

由于对js的了解比较少,最简单的应用我都试了很久……下面就分享下js的touch事件的实际引用:

 

${document.addEventListener("touchmove", _touch, false);})function _touch;}

简单应用案例:

以上代码不可避免的使用了jquery的某些东西,不使用jquery的可以忽略之。

 1 <body>
 2         123
 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>

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节点坐标好吧,我其实也刚开始学,反正先把一些百度来的属性记下来再说。

 

本文由美高梅网站是多少发布于美高梅-运维,转载请注明出处:touch事件应用

上一篇:全角转半角部分_javascript技巧_脚本之家,数据_ 下一篇:不能提交表单的错误原因美高梅网站是多少
猜你喜欢
热门排行
精彩图文