windows phone和android,ios的touch事件兼容

  

1.开发背景

  最近用html5写了个小游戏,中间踩过无数坑,有很多甚至百度都百度不到答案,可见html5还真是不成熟,兼容性的复杂度比ie6有过之而无不及,性能那个渣简直无力吐槽。。

  好了,吐槽结束,虽然有这么多的缺点,但是由于其良好的跨平台前景以及极低的学习成本,再加上优秀的框架,我最终还是选择了用html5来开发这个小游戏,而且是小游戏,所以就没有用什么游戏开发框架了,只是自己简单的封装了一个,因此所有的bug都被我走了一遍。。正当我调试完所有的android上的bug之后,心想自己的努力不能白费啊,跨平台呢?上wp看看,结果,。。发现居然没有结果了。。自己平时用wp手机为主,android只是开发机( 淘宝上买的屌丝机).然后又是百度又是bing,最终发现原来ie10种中的触摸事件和android、ios不一样,貌似ie10是MSPointerMove之类,ie11是pointermove(居然同一系列还没事改名,这无疑增大了兼容负担。。)看到此处lz还挺盲目乐观,至少还有一大批的兼容框架吧。。框架确实有,不过基本上都是集成的重型webapp框架,比如zepto的touch.js, 在wp8手机上配合jquery失败。我一个小游戏实在没有必要啊,否则还不如直接学个游戏引擎(lz太懒,看到那么繁复的api又没有良好的开发工具(webstorm虽然好,毕竟是破解的。。),而且自己也不是专门搞前端的,只是兴趣爱好,所以每次想学就又半途而废了。。)

  最终,终于让我找到了pointer.js,虽然他的api方式是微软版本的(采用少数派,有点不爽),但是能凑合着用也算了,不过在wp8手机上测试失败,事实上ie10也测试失败,什么堆栈溢出,自己改了改源码,不报错了,但是触摸也没有反应了,于是又放弃了。。

  最后lz鼓起勇气,决定自己写一个小的封装,但是在写的过程中又是坑无数。。因为lz新系统没有装wp8的sdk(以前装过2012版的,貌似和校园网客户端有冲突,于是就只敢装虚拟机里了),所以只能用原始的js alert()调试,结果发现,那些网上的博客,框架,都采用的MSPointer[Down|Up]在滑动手势中是不会触发的,只有在点击才会触发。。我了个去啊,这算什么回事,难道真的得放弃wp版本吗?放弃了wp平台,这跨平台也跨的太坑爹了吧。。而且在滑动事件中MSPointerMove也只会触发两次,估计只是第一个点和最后一个点两次。就在lz万分懊恼,快要被html5搞得神经错乱之际(其实在开发过程中我总是在犹豫要不要用原生的java开发android版本算了,性能绝对能好上一个数量级,现在画面掉帧严重。。),忽然灵光一闪,既然down,up不触发那么over和out呢?果断换成MSPointer[over|out],居然成功了!!然后自己一顿简单封装,只支持单点触控,多点触控什么的都没考虑了,电脑的mouse事件虽有考虑,不过基本无效,以后有时间再完善吧,不过现在暂时够用了。现在把思路发出来,如果大家有需要的二次开发什么的也方便。。

代码写得可能不够优雅,实在是这个需要兼容的太混乱,加之水平有限,所以还请大家海涵,不喜勿喷。。。

2.上源码

/**
 * 兼容ie10,11和android、ios的触摸事件,只需要和android,ios一样使用函数就可以了,
 */
var TouchFix = {};
(function() {
    var MSPointerType={
        start:"MSPointerOver",
        move:"MSPointerMove",
        end:"MSPointerOut"
    },
    pointerType={
        start:"pointerover",
        move:"pointermove",
        end:"pointerout"
    },
    touchType={
        start:"touchstart",
        move:"touchmove",
        end:"touchend"
    },
    mouseType={
        start:"mousedown",
        move:"mousemove",
        end:"mouseup",
        out:"mouseout"
    };
    function isTouch() {
        return typeof window.ontouchstart !== "undefined";
    }

    function isMSPointer() {
        return window.navigator.msPointerEnabled;
    }

    function isPointer() {
        return window.navigator.pointerEnabled;
    }

    function bindStart(el,cb) {
        el.addEventListener(pointerType.start,
            function (e) {
                pointerHandler(e,cb);
            });
        el.addEventListener(MSPointerType.start,
            function (e) {
                MSPointerHandler(e,cb);
            });
        el.addEventListener(touchType.start,
            function (e) {
                touchHandler(e,cb);
            });
        if (!isTouch() && !isMSPointer() && !isPointer()) {
            el.addEventListener(mouseType.start,
            function (e) {
                mouseHandler(e,cb);
            });
        }
    }

    function bindMove(el,cb) {
        el.addEventListener(pointerType.move,
            function (e) {
                pointerHandler(e,cb);
                cb(e);
            });
        el.addEventListener(MSPointerType.move,
            function (e) {
                MSPointerHandler(e,cb);
                cb(e);
            });
        el.addEventListener(touchType.move,
            function (e) {
                touchHandler(e,cb);
            });

        if (!isTouch() && !isMSPointer() && !isPointer()) {
            el.addEventListener(mouseType.move,
            function (e) {
                mouseHandler(e,cb);
            });
        }
    }

    function bindEnd(el,cb) {
        el.addEventListener(pointerType.end,
            function (e) {
                pointerHandler(e,cb);
            });
        el.addEventListener(MSPointerType.end,
            function (e) {
                MSPointerHandler(e,cb);
            });
        el.addEventListener(touchType.end,
            function (e) {
                touchHandler(e,cb);
            });

        if (!isTouch() && !isMSPointer() && !isPointer()) {
            el.addEventListener(mouseType.end,
            function (e) {
                mouseHandler(e,cb);
            });
            el.addEventListener(mouseType.out,
            function (e) {
                mouseHandler(e,cb);
            });
        }
    }

    TouchFix.bind = function(el,type,cb) {
        switch (type) {
            case touchType.start:
                bindStart(el,cb);
                break;
            case touchType.move:
                bindMove(el,cb);
                break;
            case touchType.end:
                bindEnd(el,cb);
                break;
            default:
                break;
        }
    }
    var hasTouchStart=false;
    function commonHandler (e) {
        if(e.type===MSPointerType.start
            ||e.type===pointerType.start
            ||e.type===mouseType.start){
            e.type=touchType.start;
        }else if(e.type===MSPointerType.move
            ||e.type===pointerType.move
            ||e.type===mouseType.move){
            e.type=touchType.move;
        }else if(e.type===MSPointerType.end
            ||e.type===pointerType.end
            ||e.type===mouseType.end
            ||e.type===mouseType.out){
            e.type=touchType.end;
        }

        e.touches=[];
        e.pageX=e.clientX;
        e.pageY=e.clientX;
        e.touches[0]=e;
    }
    function MSPointerHandler(e,cb) {
        commonHandler(e);
        cb(e);
    }
    function pointerHandler (e,cb) {
        commonHandler(e);
        cb(e);
    }
    function touchHandler (e,cb) {
        cb(e);
    }

    function mouseHandler (e,cb) {
        commonHandler(e);
        cb(e);
    }

})();

touchfix.js

 1 TouchFix.bind(element,"touchstart",function(e){
 2     var t=e.touches[0];
 3     var x=t.pageX;
 4     var y=t.pageY;
 5 });
 6 TouchFix.bind(element,"touchmove",function(e){
 7     var t=e.touches[0];
 8     var x=t.pageX;
 9     var y=t.pageY;
10 });
11 TouchFix.bind(element,"touchend",function(e){
12 //在安卓中貌似在这里获取不到e,只能用move中的最后一个点代替
13     if(!e||!e.touches||e.touches.length===0){
14         return ;
15     }
16     var t=e.touches[0];
17     var x=t.pageX;
18     var y=t.pageY;
19 });

windows phone和android,ios的touch事件兼容

时间: 2024-10-10 20:34:26

windows phone和android,ios的touch事件兼容的相关文章

android中根据touch事件判断单击及双击

private static final int MAX_INTERVAL_FOR_CLICK = 250;     private static final int MAX_DISTANCE_FOR_CLICK = 100;     private static final int MAX_DOUBLE_CLICK_INTERVAL = 500;     int mDownX = 0;     int mDownY = 0;     int mTempX = 0;     int mTempY

Android 编程下 Touch 事件的分发和消费机制

Android 中与 Touch 事件相关的方法包括:dispatchTouchEvent(MotionEvent ev).onInterceptTouchEvent(MotionEvent ev).onTouchEvent(MotionEvent ev):能够响应这些方法的控件包括:ViewGroup 及其子类.Activity.方法与控件的对应关系如下表所示: Touch 事件相关方法   方法功能     ViewGroup         Activity        public b

Android开发之Touch事件分发机制

原地址http://www.cnblogs.com/linjzong/p/4191891.html Touch事件分发中只有两个主角:ViewGroup和View.Activity的Touch事件事实上是调用它内部的ViewGroup的Touch事件,可以直接当成ViewGroup处理. View在ViewGroup内,ViewGroup也可以在其他ViewGroup内,这时候把内部的ViewGroup当成View来分析. ViewGroup的相关事件有三个:onInterceptTouchEv

简单高效易用Windows/Linux/ARM/Android/iOS平台实现RTMP推送组件EasyRTMP-Android MediaCodec硬编码流程介绍

音视频流媒体硬解码是指不使用CPU进行编码,使用显卡GPU,专用的DSP.FPGA.ASIC芯片等硬件进行编码.编码框架Video ToolBox和AudioToolbox. EasyRTMP是结合了多种音视频缓存及网络技术的一个rtmp直播推流端,包括:圆形缓冲区(circular buffer).智能丢帧.自动重连.rtmp协议等等多种技术,能够非常有效地适应各种平台(Windows.Linux.ARM.Android.iOS),各种网络环境(有线.wifi.4G),以及各种情况下的直播恢复

简单、高效、易用的全平台(Windows/Linux/ARM/Android/iOS)web实现RTMP推送组件EasyRTMP-Android BUS传递消息过程介绍

背景分析 RTMP是Real Time Messaging Protocol(实时消息传输协议)的首字母缩写,该协议基于TCP,是一个协议族,包括RTMP基本协议及RTMP/RTMPS/RTMPE等多种变种.RTMP是一种设计用来进行实时数据通信的网络下ieyi,主要用来在Flash/AIR平台和支持RTMP协议的流媒体/交互服务器之间进行音视频和数据通信.RTMP推流,就是将直播内容推送到服务器的过程. EasyRTMP-Android BUS传递消息过程 提出问题EasyRTMP-Andro

Android Touch事件传递机制全面解析(从WMS到View树)

转眼间近一年没更新博客了,工作一忙起来.非常难有时间来写博客了,因为如今也在从事Android开发相关的工作,因此以后的博文也会很多其它地专注于这一块. 这篇文章准备从源代码层面为大家带来Touch事件的传递机制.我这里分析的源代码时Android4.4的. 说到分析源代码,光看肯定是不行的,一定要亲自去跟,而且要边跟边思考,所以在下一篇中.会有一个Demo来为大家详细分析源代码的走向. 以下进入正题,先来看下Android中事件的分类: 1.键盘事件:主要是指按下虚拟键盘的某个按键.或者机身的

Android 根据规划 Touch 分配和消费机制的事件

Android 中与 Touch 事件相关的方法包含:dispatchTouchEvent(MotionEvent ev).onInterceptTouchEvent(MotionEvent ev).onTouchEvent(MotionEvent ev):可以响应这些方法的控件包含:ViewGroup.View.Activity.方法与控件的相应关系例如以下表所看到的: Touch 事件相关方法   方法功能     ViewGroup          View             Ac

Android touch 事件的分发和消费机制

Android 中与 Touch 事件相关的方法包括:dispatchTouchEvent(MotionEvent ev).onInterceptTouchEvent(MotionEvent ev).onTouchEvent(MotionEvent ev):能够响应这些方法的控件包括:ViewGroup.View.Activity.方法与控件的对应关系如下表所示: Touch 事件相关方法   方法功能    ViewGroup           View             Activi

Android Touch事件原理加实例分析

Android中有各种各样的事件,以响应用户的操作.这些事件可以分为按键事件和触屏事件.而Touch事件是触屏事件的基础事件,在进行Android开发时经常会用到,所以非常有必要深入理解它的原理机制. Android Touch事件原理描述 一个最简单的屏幕触摸动作触发了一系列Touch事件:ACTION_DOWN->ACTION_MOVE->ACTION_MOVE->ACTION_MOVE...->ACTION_MOVE->ACTION_UP. 当屏幕中包含一个ViewGr