Javascript前端征途

昨天晚上回到家后还跑回公司处理了一个bug，是这样的，我一个按钮，鼠标移动上去，要现实一个浮层，而这个按钮又是可以点击执行相关ajax操作的。简单吧，我就载在这个简单的需求上面了，至于原因，总之我承认我在这个跌过一次的坑上面又跌了一跤，记的去年在139.com的网盘项目组的时候就处理过相关问题还有过< a href=’http://www.nickli.cn/?p=60‘>一篇博文记录</a>来时刻警醒自己，而我又在这个问题上摔跤了.

我偷了个懒，觉着直接用css做了个兼容的浮层很帅，然后，又有个要命的是，我在页面是用<base href>标签，这逼的我在a标签上面只能写<a href=”javascript:void(0)”>,因为如果用<a href=”#”>的话，页面还是会跳到base目录下面去，这很恶心（以后要尽量避免使用base标签了！！！！！！！），总之就是我偷了个懒引来了这个问题——a标签还有个onclick事件侦听，执行玩一个ajax后，在回调函数里面会弹出一个div浮层，而这个浮层上面的三个背景图片一个都不少的全部没出来，这个浮层被裸了！

那么可能问题就真的出在这里，这里要感谢组里前端<a href=”http://blog.htmlwind.com/“>大师兄</a>帮忙一起耐心调试，我们抓包发现点击按钮后，直到浮层出来，没有发现三个图片的请求发出。那么可以肯定，我们确实没有看过，这个浮层被裸了是因为图片没有回来，而不是以为其他的css的问题，那么为什么会这样呢！

而我是把onclick换成了onmousedown，这样却发现这个浮层能现实图片了，而偶尔的是会有一张显示不出来。

有位哥们遇到过类似的问题。说几个吃饱了没事干的老外反复试验，发现这是IE6 一个底层机制的bug，说是 <a href=”javascript:void(0)”>或者<a href=#”>这样使用a标签的话并不能阻止a标签最后触发一个什么行为，导致ie6会错误的认为页面刷新或者重定向了，并且中断了当前所有连接，这样新图片的加载就被aborted了

那么如果真的是这样，就好理解了，因为我的浮层是有个屏蔽层的，onmousedown后，焦点已经移动 到了屏蔽层上面，a标签的onclick侦听也不在执行，那么这个a标签最后出发的那个什么行为就不会触发了，于是我 的图片就可以正常的请求url了。这个只是我的这个特定的应用场景下面的一个巧合的解决办法。

这个bug一般会出现在这样的情况下面

a标签事件一般情况是这样写的, 也可能是绑定事件, 解决方式一样:

1. <a href=”javascript://” onclick=”dosomething()”>a1</a>

2. <a href=”javascript:void(0)” onclick=”dosomething()”>a2</a>

3. <a href=”###” onclick=”dosomething()”>a3</a>

第三种方法dosomething()中切换图片完全没有问题, 但是href=”###” 却带来了另一个问题, 占用了锚点,页面URL也不美观.

第1,2种方式虽然没有上面的问题, 但会引发IE6的奇怪bug, dosomething()中图片无法加载.

只要在dosomething();后面增加一个return false;就可以解决了.

如果是绑定事件, 同样在function最后增加return false;就行.

唉，希望如果也有碰到这样诡异问题的朋友能看了这里后能有所以收获。

Trackback URL