IE6 + Png + Fixpng 之后的Png图片点击时报错Bug及其解决方案

众所周知，IE6 + Png 有透明效果显示的Bug。

这个问题有很多达人提出了解决方案，其中包括广为流传的fixpng.js

但很少有人提到，在使用fixpng.js进行修正之后，当点击Png图片时，IE6报错。

如果关闭了IE中的允许脚本调试选项，也许这个错误不会在网页上弹出窗口提示，但经测试证明，如果置之不理，在神奇的IE6中，错误可能象癌细胞一样转移，最终在你想象不到的地方蹦出来，产生致命的影响。

 

因此，解决它，而不是回避它，才是正确的态度。

 

以下是我的解决方案：

 

网页上的Png图片可以分为两类，一种是单纯用于显示的，另外一种可能被封装在某些元素之内，这些元素要能捕捉Click事件，激发某些网页内的数据操作或者打开新网页。

 

1）单纯用于显示的Png图片

将图片封装在<span>中，定义它的类标识为pngSpan,如：

<span class="pngSpan"><img src="xxx.png" class="fixpng" /></span>

用Javascript拦截所有对这些图片的点击：

    $(".pngSpan").click(function(){
        return false;
    });

注：以上$(...)是Jquery框架下的用法，在别的框架下写法应相应调整。

如上，则点击事件被封装元素<span>提前捕获，并强行中止，png图片元素无法捕获点击事件。

 

 

2）被封装在待点击元素内的Png图片

幸运的是，对于一般的Html元素, 在IE6下点击事件是先被外部元素捕捉到，之后才传递到内部的Png图片元素。在这种情况下，只需要注意在click事件处理完毕后不要忘记以“return false；” 语句结尾，就可以自然截断点击事件向Png图片传递。如:

<div id="x_div"><img src="xxx.png" class="fixpng" /></div>

相应的Js代码为：

    $("#x_div").click(function(){

        ...... // 事务处理代码
        return false; //不可省略

    });

 

对于<a>元素，情况有所不同，点击事件是先被其内部的图片元素捕获，之后才触发<a>元素打开新链接的操作，因此如果如方法1那样用<span class="pngSpan"></span>来封装Png图片，则<a>元素无法正常打开新连接。解决方法是给所有封装了Png图片的<a>元素加上类标识'pngA'，再用Javascript来控制打开连接的工作：

Html

    <a class="pngA" href="XXX.html"><img src="xxx.png" class="fixpng"/></a>

Javascript

    $(".pngA").click(function(){
        if ($(this).attr("target") == "_blank")
            window.open($(this).attr("href")); //在新窗口中打开连接
        else
            window.location=$(this).attr("href"); //在原窗口中打开连接
        return false; //不可省略
    });

 

以上，总计约10行Js代码，就能解决这个Bug了。