欢迎访问湖北成教网,更多超值体验尽在无忧助学网!

湖北成教网学习中心

免费咨询电话027-59239395
全部教育分类
您的位置:湖北成教网 > 热门资讯 > 资讯列表 > javascript的手机触摸屏的事件用法详解
javascript的手机触摸屏的事件用法详解
发布时间:2017-10-14 01:39:06浏览数:1512次来源:北大青鸟

现在智能手机火爆了,我们都是触摸屏事的,那么我们以前js写法是无法满足一些要求了,下面我来给大家介绍几个JS手机触摸屏的事件用法。处理Touch事件能让你跟踪用户的每一根手指的位置。你可以绑定以下四种Touch事件:

1Touch事件简介
pc上的web页面鼠 标会产生onmousedownonmouseuponmouseoutonmouseoveronmousemove的事件,但是在移动终端如 iphoneipod Touchipad上的web页面触屏时会产生ontouchstartontouchmoveontouchendontouchcancel 事件,分别对应了触屏开始、拖拽及完成触屏事件和取消。
当按下手指时,触发ontouchstart
当移动手指时,触发ontouchmove
当移走手指时,触发ontouchend
当一些更高级别的事件发生的时候(如电话接入或者弹出信息)会取消当前的touch操作,即触发ontouchcancel。一般会在ontouchcancel时暂停游戏、存档等操作。

2Touch事件与Mouse事件的出发关系
在触屏操作后,手指提起的一刹那(即发生ontouchend后),系统会判断接收到事件的element的内容是否被改变,如果内容被改变,接下来的事 件都不会触发,如果没有改变,会按照mousedownmouseupclick的顺序触发事件。特别需要提到的是,只有再触发一个触屏事件时,才会 触发上一个事件的mouseout事件。

3gesture事件
Gesture事件,包括手指点击(click),轻拂 flick),双击(double-click),手指的分开、闭合(scale)、转动(rotate)等一切手指能在屏幕上做的事情,它只在有两根 或多根手指放在屏幕上的时候触发,事件处理函数中会得到一个GestureEvent类型的参数,它包含了手指的scale(两根移动过程中分开的比例) 信息和rotation(两根手指间连线转动的角度)信息。这个事件是对touch事件的更高层的封装,和touch一样,它同样包括 gesturestartgesturechangegestureend
gesture事件触发过程:
Step 1、第一根手指放下,触发touchstart
Step 2、第二根手指放下,触发gesturestart
Step 3、触发第二根手指的touchstart
Step 4、立即触发gesturechange
Step 5、手指移动,持续触发gesturechange,就像鼠标在屏幕上移动的时候不停触发mousemove一样
Step 6、第二根手指提起,触发gestureend,以后将不会再触发gesturechange
Step 7、触发第二根手指的touchend
Step 8、触发touchstart!注意,多根手指在屏幕上,提起一根,会刷新一次全局touch!重新触发第一根手指的touchstart
Step 9、提起第一根手指,触发touchend

一、
touchstart:// 手指放到屏幕上的时候触发
touchmove:// 手指在屏幕上移动的时候触发
touchend:// 手指从屏幕上拿起的时候触发
touchcancel:// 系统取消touch事件的时候触发。至于系统什么时候会取消,不详
二、
client / clientY// 触摸点相对于浏览器窗口viewport的位置
pageX / pageY// 触摸点相对于页面的位置
screenX /screenY// 触摸点相对于屏幕的位置
identifier>// touch对象的unique ID
三,
每个Touch对象包含下列属性。
clientX:触摸目标在视口中的X坐标。
clientY:触摸目标在视口中的Y坐标。
identifier:表示触摸的唯一ID
pageX:触摸目标在页面中的x坐标。
pageY:触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
target:触摸的DOM节点坐标。
例:
<!doctype html> 
    <html> 
    <
head
    <meta charset="utf-8"> 
    <title>
touches</title> 
    <style> 
    body{ font-size:60px; color:
red;} 
    </
style
    <script> 
    function touches(ev){ 
        if(ev.touches.length==1){ 
            var oDiv=document.getElementById('div1'); 
            
switch(ev.type){ 
                case 'touchstart': 
                    oDiv.innerHTML='Touch start('+ev.touches[0].clientX+', '+ev.touches[0].clientY+')'; 
                    ev.preventDefault();  //阻止出现滚动条 
                    break; 
                case '
touchend': 
                    oDiv.innerHTML='Touch end('+ev.changedTouches[0].clientX+', '+ev.changedTouches[0].clientY+')'; 
                    break; 
                case 'touchmove': 
                    oDiv.innerHTML='Touch move('+ev.changedTouches[0].clientX+', '+ev.changedTouches[0].clientY+')'; 
                    break; 
                 
            } 
        } 
    } 
    document.addEventListener('touchstart',touches,false); 
    document.addEventListener('touchend',touches,false); 
    document.addEventListener('
touchmove',touches,false); 
    </script> 
    </head> 
     
    <body> 
    <div id="div1"></div> 
    </body> 
    </html>

二、手势事件:
gesturestart: 当一个手指按在屏幕上,另一个手指有触发屏幕时,触发;
gestureend: 当你的任何一个手指从屏幕上移开的时候,触发;
gesturechange: 当触摸屏幕的任何一个手指发生变化的时候,触发;
在事件对象这里,其他的都还一样,在手势这里多了两个很有用的东西:
 一个是rotation: 手指变化引起的旋转角度,顺时针为正的,逆时针为负的;
还有一个scale: 两个手指之间的距离变化;
例:
<!doctype html> 
    <html> 
    <
head
    <meta charset="utf-8"> 
    <title>gesture</title> 
    <style> 
    body{ font-size:60px; color:
red;} 
    </
style
    <script> 
    window.onload=function(){ 
        function gesture(ev){ 
            var div=document.getElementById('div1'); 
            
switch(ev.type){ 
                case 'gesturestart': 
                    div.innerHTML='Gesture start (rotation='+ev.rotation+', scale='+ev.scale+')'; 
                    ev.preventDefault(); 
                    break; 
                case 'gestureend': 
                    div.innerHTML='Gesture End (rotation='+ev.rotation+', scale='+ev.scale+')'; 
                    break; 
                case 'gesturechange': 
                    div.innerHTML='Gesture Change (rotation='+ev.rotation+', scale='+ev.scale+')'; 
                    break; 
            } 
        } 
        document.addEventListener('gesturestart',gesture,false); 
        document.addEventListener('gestureend',gesture,false); 
        document.addEventListener('gesturechange',gesture,false);    
    } 
    </script> 
    </
head
     
    <body> 
    <div id="div1"></div> 
    </body> 
    </html>   
现在jquery提供了一个非常不错的jquery手机插件,就是jquery mobile了,使用它就可以很方便哦。

 


继续浏览有关的文章
无忧助学名师免费一对一量身定制服务!
为什么要告诉无忧助学?
  • 10万多学员的选择
  • 价格更低 额外礼品
  • 跟踪服务 解决问题
教育问答
  • 中专学校想读个本科

    已答复 响应时间:51分钟