快捷搜索:

金沙第一娱乐娱城官网

当前位置:金沙第一娱乐娱城官网 > 金沙第一娱乐娱城官网 > 事件可以执行,只有再触发一个触屏事件时

事件可以执行,只有再触发一个触屏事件时

来源:http://www.dlksamusic.com 作者:金沙第一娱乐娱城官网 时间:2020-04-15 22:03

对于以为WEB前端工作人员来说,必须得了解PC和移动端那些鼠标和触屏事件。下面就简单的介绍下:

 

1、Touch事件简介pc上的web页面鼠 标会产生onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件,但是在移动终端如 iphone、ipod Touch、ipad上的web页面触屏时会产生ontouchstart、ontouchmove、ontouchend、ontouchcancel 事件,分别对应了触屏开始、拖拽及完成触屏事件和取消。当按下手指时,触发ontouchstart;当移动手指时,触发ontouchmove;当移走手指时,触发ontouchend。当一些更高级别的事件发生的时候会取消当前的touch操作,即触发ontouchcancel。一般会在ontouchcancel时暂停游戏、存档等操作。

最近开发手机APP,在进行手机测试时,发现在苹果手机上使用touchstart,事件可以执行,但是在安卓----我的是4.2 版本,同事的是winPhone8----手机上面这个事件却都不执行---(我们团队在最后还是选择click事件执行,虽然它执行很慢,)所以我搜罗了一下触摸手机的触摸事件及手势事件,以下为网站资料,先储备下来吧,当然,手势事件我还没有使用过,下面的代码是从网站上查询的资料,。

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

 

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

/*触摸事件*/

1、Touch事件简介
pc上的web页面鼠 标会产生onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件,但是在移动终端如 iphone、ipod Touch、ipad上的web页面触屏时会产生

ontouchstart、ontouchmove、ontouchend、ontouchcancel事件,分别对应了触屏开始、拖拽及完成触屏事件和取消。
当按下手指时,触发ontouchstart;
当移动手指时,触发ontouchmove;
当移走手指时,触发ontouchend。
当一些更高级别的事件发生的时候(如电话接入或者弹出信息)会取消当前的touch操作,即触发ontouchcancel。一般会在ontouchcancel时暂停游戏、存档等操作。

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

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>

-->

/*手势事件*/

本文由金沙第一娱乐娱城官网发布于金沙第一娱乐娱城官网,转载请注明出处:事件可以执行,只有再触发一个触屏事件时

关键词:

上一篇:没有了

下一篇:没有了