本文针对博客园闪存分页在IE8浏览器中点击页码无法翻页的问题进行排查。发现通过setAttribute或jQuery的attr方法动态添加onclick事件在IE8中均失效。最终采用直接赋值函数并配合eval执行字符串的方式,成功解决了该兼容性问题。
IE8动态添加onclick事件失效分析
博客园闪存分页功能由JavaScript动态生成,近期测试发现,在IE8浏览器环境中,点击页码无法触发翻页操作,该翻页逻辑依赖于当前页码元素的onclick事件。
最初的实现代码如下:
代码如下:
var a = document.createElement("a");
a.setAttribute("onclick", this.ClickFunctionName + "(" + pageIndex + ");Pager.SetCurrent(" + pageIndex + ");");由于IE8浏览器对setAttribute方法的支持存在缺陷,导致此处通过setAttribute添加的onclick事件处理程序未能成功绑定。
随后尝试改用jQuery的attr方法进行设置:
代码如下:
$(a).attr("onclick", this.ClickFunctionName + "(" + pageIndex + ");Pager.SetCurrent(" + pageIndex + ");");
虽然此时onclick属性看似已添加,但在IE8中无论点击多少次,该事件处理程序均无法执行,而在Chrome与Firefox浏览器中此方式无异常。
兼容IE8的最终解决方案
最终通过以下代码解决了该兼容性问题:
代码如下:
var js = this.ClickFunctionName + "(" + pageIndex + ");Pager.SetCurrent(" + pageIndex + ");";
a.onclick = function() { eval(js); }