移动开发趟坑记录

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

在本地开发完毕后，上传到服务器，使用微信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！ 浪费了两个多小时，还好又收获了一点经验，特此记录一下！