iOS5 innerHTML插入内联touch事件的问题

2011-10-19

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等都是可以的。这个问题导致了jquerysencha的一些应用都挂了。

目前的解决办法就是,先把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很有问题。

评论

2011年10月26日 10:28

恩,iOS5 safari 确实有很多bug,input的placeholder好像就有问题

2011年10月26日 11:12

呃,这种事情应该会很快出补丁的吧?