移动开发趟坑记录

手上有个项目,里面包含了微信开发的一些内容,其中有一个很简单的用户注册页面,即:输入手机号 -> 获取验证码 -> 用户注册 -> 获得奖励

在本地开发完毕后,上传到服务器,使用微信windows客户端测试,一切正常。遂在微信上进行测试(发送给自己真的是微信和QQ上最好用的功能,没有之一),但是诡异的事情出现了,无论如何点击按钮都没有反应。由于我在这个页面使用了jquery以及jquery的ajax方法,此时我第一反应是微信不支持jquery的ajax方法,我这么怀疑是有理由的,前些日子我曾经遇到过一些js方法微信并不支持。但是我并没有立即替换成javascript原生的ajax方法(这就像习惯了5天到的快递,再也无法适应一个月之久的一样),我先屏蔽了ajax方法,将剩余的选择元素、赋值等方法全部替换成javascript的方式,然而在微信上还是无效!!! 摔!!!这是要闹哪样啊?

冷静下来之后,我再次测试、观察现象,button的click事件应该是根本没有触发。此时我已经确定,也许不是微信不兼容jquery的ajax方法,而是button的事件绑定出了问题。这个页面是一个html5页面,页面上的元素都是调用了一个外部js load进来的,因此我在页面load完之后,绑定了button的click事件:

    document.getElementById("verify_button").onclick = getVirifyCode;

事件绑定是肯定绑定上了的,一开始我用的是jquery的 $(document).ready 方法,现在已经改成 window.onload 方法,并且我在这个方法里已经测试了,是可以获取到 button 元素的,那为什么事件绑定无效了呢?这个时候,我决定在手机浏览器上测试一下,也许不只是微信的问题。果然,手机chrome浏览器也是同样的现象。那么这个肯定是整个移动浏览器兼容的问题(期间pc浏览器交互一直正常)。尝试了各种 google、bing、baidu 的方法之后,我突然找到这么一个解决方案:

默认情况下jquery的click是OK的,但是跟有些html5游戏代码一混起来就不行了。解决方案:

$("#element").bind("mousedown touchstart", function(event){
event.stopPropagation();event.preventDefault(); 
//do something 
});

同时注册mousedown和touchstart事件。

只到此时,恍然大悟,我的页面也是 html5 的,虽然这上面并没有游戏代码。将我的方法按照这个解决方案改了一下之后,bingo! 浪费了两个多小时,还好又收获了一点经验,特此记录一下!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 177,455评论 25 709
  • 时隔十二年再游法国、瑞士、奥地利、意大利、比利时和德国,不为故地重游,只为陪太太和孩子。因为他们都没有来过...
    Andy111阅读 868评论 0 3
  • 我再次感受到科幻的魅力。科普和科幻同样是培养科学精神的拐杖,科普是现实和功利主义的,科幻是感性和理想主义的...
    生如夏花H阅读 1,073评论 0 2
  • 我在广东,通常遇到的就三种天气:晴天,阴天,雨天。在不同的天气下,我的心情会不一样。 今天天气晴朗了,阳光普照,也...
    吉日良辰阅读 326评论 0 0
  • 进入暑假第三周了,姥姥的作文辅导又开讲啦!今天的内容是“写文章如何列提纲”。姥姥说,学会列提纲是小学高年...
    中学生马小兑作文集阅读 497评论 0 1

友情链接更多精彩内容