热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

windowsphone和android,ios的touch事件兼容

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

  

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 });

 

 

 


推荐阅读
  • 本文介绍了互联网思维中的三个段子,涵盖了餐饮行业、淘品牌和创业企业的案例。通过这些案例,探讨了互联网思维的九大分类和十九条法则。其中包括雕爷牛腩餐厅的成功经验,三只松鼠淘品牌的包装策略以及一家创业企业的销售额增长情况。这些案例展示了互联网思维在不同领域的应用和成功之道。 ... [详细]
  • mui框架offcanvas侧滑超出部分隐藏无法滚动如何解决
    web前端|js教程off-canvas,部分,超出web前端-js教程mui框架中off-canvas侧滑的一个缺点就是无法出现滚动条,因为它主要用途是设置类似于qq界面的那种格 ... [详细]
  • Mac OS 升级到11.2.2 Eclipse打不开了,报错Failed to create the Java Virtual Machine
    本文介绍了在Mac OS升级到11.2.2版本后,使用Eclipse打开时出现报错Failed to create the Java Virtual Machine的问题,并提供了解决方法。 ... [详细]
  • 在说Hibernate映射前,我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象,以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]
  • 本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤,包括在application.properties配置文件中添加thymeleaf的配置信息,引入thymeleaf的jar包,以及创建PageController并添加index方法。 ... [详细]
  • 知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用,以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例,说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案,如搜索关键词"Marie Curie",会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革,不仅美国的微软必应,中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • 本文讲述了作者通过点火测试男友的性格和承受能力,以考验婚姻问题。作者故意不安慰男友并再次点火,观察他的反应。这个行为是善意的玩人,旨在了解男友的性格和避免婚姻问题。 ... [详细]
  • 本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用,包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ... [详细]
  • 1,关于死锁的理解死锁,我们可以简单的理解为是两个线程同时使用同一资源,两个线程又得不到相应的资源而造成永无相互等待的情况。 2,模拟死锁背景介绍:我们创建一个朋友 ... [详细]
  • 后台获取视图对应的字符串
    1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注:不会执行对应的ac ... [详细]
  • 本文介绍了在Windows环境下如何配置php+apache环境,包括下载php7和apache2.4、安装vc2015运行时环境、启动php7和apache2.4等步骤。希望对需要搭建php7环境的读者有一定的参考价值。摘要长度为169字。 ... [详细]
  • Android实战——jsoup实现网络爬虫,糗事百科项目的起步
    本文介绍了Android实战中使用jsoup实现网络爬虫的方法,以糗事百科项目为例。对于初学者来说,数据源的缺乏是做项目的最大烦恼之一。本文讲述了如何使用网络爬虫获取数据,并以糗事百科作为练手项目。同时,提到了使用jsoup需要结合前端基础知识,以及如果学过JS的话可以更轻松地使用该框架。 ... [详细]
  • 单页面应用 VS 多页面应用的区别和适用场景
    本文主要介绍了单页面应用(SPA)和多页面应用(MPA)的区别和适用场景。单页面应用只有一个主页面,所有内容都包含在主页面中,页面切换快但需要做相关的调优;多页面应用有多个独立的页面,每个页面都要加载相关资源,页面切换慢但适用于对SEO要求较高的应用。文章还提到了两者在资源加载、过渡动画、路由模式和数据传递方面的差异。 ... [详细]
  • 本文总结了在编写JS代码时,不同浏览器间的兼容性差异,并提供了相应的解决方法。其中包括阻止默认事件的代码示例和猎取兄弟节点的函数。这些方法可以帮助开发者在不同浏览器上实现一致的功能。 ... [详细]
  • html和js代码互转,html转html5
    本文目录一览:1、html网页跳转javascript代码实现 ... [详细]
author-avatar
mobiledu2502932307
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有