手上有个项目,里面包含了微信开发的一些内容,其中有一个很简单的用户注册页面,即:输入手机号 -> 获取验证码 -> 用户注册 -> 获得奖励:
在本地开发完毕后,上传到服务器,使用微信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! 浪费了两个多小时,还好又收获了一点经验,特此记录一下!