点击链接标签后页面中GIF动画停止播放不动了

注:这个问题仅出现在IE6以及Maxthon浏览器上,尽管Maxthon浏览器使用的是系统当前的IE内核(如果你当前系统是IE6,那么就调用的是IE6的内核,如果是IE7,那么就是IE7的内核),但是在这一点上仍然有和IE6同样的问题。此外的浏览器IE7,FF,Opera均没有此问题。
很多时候,我们希望能在页面上加上一些JS的互动性元素。一般我们会选择标签作为互动元素的点击点,因为当鼠标放到标签上面是会变成手形,这是一种很好的提示方式。
但是当我们点击
标签以后,会发现当前页面上所有的GIF都停止了播放,尽管我们可能只是用做了某些内容的显示开关。
根据我的分析,为了让鼠标在
标签上时变成手形,那么就必须给标签指明”href”属性,但是这个属性会引起页面的跳转,而正是这个跳转导致了GIF的停止播放。
我们往往不想在点击了
标签以后让页面跳转,而只是执行一段JS代码,那么如何指定”href”属性的值就有可能很重要。
网上有的朋友说将”javascript:;”或者”javascript:void(0);”之类的值指定给”href”属性,执行一段空的JS语句,实际什么也没有操作。这样”href”属性既有了值,使得鼠标可以手形,又可以防止页面跳转,看似很完美。
虽然这个方法确实很完美,但是在目前的众多浏览器中,BUG最多(个人意见),用户数也最大的IE6浏览器并不吃这一套,依旧会在你点击了
标签以后停止播放页面上GIF动画。
因此只有另外找方法了,自然而然想到的就是
标签的”onclick”属性,我们希望点击标签以后执行的JS代码一般也是在这里指定的。
因为事件(event)在DOM中是有一定的传递顺序的,如果鼠标点击了
标签,那么这个”点击事件”会先交给”onclick”属性指定的回调方法处理,进而交给别的相关回调方法处理。而处理页面跳转部分的方法正是在”onclick”以后。如果在”onclick”里将”事件消息”拦截了,那么处理页面跳转部分的代码将收不到此”事件消息”,完全当没有点击过处理,自然也就不会跳转了。
所以解决方法也就摆在眼前了,让”onclick”方法返回一个”false”即可阻止”事件消息”的进一步传递,也就阻止了页面跳转,GIF也就不会停止播放了。当然这样做了以后就完全把”href”里面的值无视掉了,现在的”href”属性只是为了让鼠标变成手形而存在的。
下面是演示代码,感兴趣的朋友可以看看:

未经允许不得转载:Windy's Blog » 点击链接标签后页面中GIF动画停止播放不动了

赞 (0)