iOS5一出来,很多对safari的溢美之声,那些新增的特性确实好,但这个版本的safari很有问题。
document.getElementById("test").innerHTML = '<div ontouchstart="alert(\'touchstart\')"></div>'
一般,这样的代码是没问题的,一段HTML字符串赋给DOM的innerHTML后,自动生成DOM,并且上面的内联事件都是有效的。在至今所有浏览器都可以这样,但现在在iOS5的Safari不行,生成的DOM中ontouchstart事件无效,目前测试ontouchstart/ontouchmove/ontouchend都不行,若改成onmousedown,onclick等都是可以的。这个问题导致了jquery,sencha的一些应用都挂了。
目前的解决办法就是,先把HTML加入一个新建的DOM里,再用cloneNode把创建好的DOM取出来加入目标位置,这样才可以。如果不用cloneNode而是直接把创建好的元素塞进去还是不行的。
var dom = document.createElement("div"); dom.innerHTML = '<span ontouchstart="alert(\'touchstart\')">touchstart dom create</span> '; document.getElementById("testTSdom") .appendChild(dom.childNodes[0].cloneNode(true));
可以在这里 http://bangswork.googlecode.com/svn/trunk/lab/ios5touchstart/index.html 看到效果
这应该属于一个bug,居然就带着这么明显的bug发布出来了,要折腾死做移动版的前端了。
此外,还发现iOS5下Safari的一些其他问题,例如缓存很奇怪,js excution timeout,还有一些已经碰到但未明原因的,总之,这个safari很有问题。