IE10标准模式不支持HTC (Html Components) ，升级重写Htc原有代码之二: 事件

下面是一个网上流传很广的htc例子，例如取名：ie10_htc.htc

<component>
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="hig_lite()" />
<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="low_lite()" />

/*其实，换成下面的写法也可以*/
/*<ATTACH EVENT="onmouseover" HANDLER="hig_lite"/>*/
/*<ATTACH EVENT="onmouseout" HANDLER="low_lite"/>*/

 <script type="text/javascript">
     function hig_lite() {
         style.color = 255;
     }
　　　　
     function low_lite() {
         style.color = 0;
     }
</script>
</component>

对应的ie10_htc.htm代码：

<html>
<head>
    <title id="1">asdf</title>
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <style>
    h1{ behavior: url(ie10_htc.htc) }
    </style>
</head>
<body>
　　<h1>把鼠标放在这里</h1>
</body>
</html>

在IE9下运行木有问题，但是到IE9改为IE10，然后用IE10浏览就会发现效果没有了。

升级这段htc的方法倒也不难，如果用纯js来写，可以这样：

<html>
<head>
    <title id="1">asdf</title>
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <script type="text/javascript">
        function hig_lite() {
           this.style.color = 255;
        }
        function low_lite() {
            this.style.color = 0;
        }

        function loaded() {
            var hi_Arr = document.getElementsByTagName("h1");
            for (var i = 0; i < hi_Arr.length; i++) {
                hi_Arr[i].addEventListener("mouseover", hig_lite);
                hi_Arr[i].addEventListener("mouseout", low_lite);
            }
        }
      
    </script>
</head>
<body onload="loaded()">
　　<h1>把鼠标放在这里</h1>
</body>

因为不再依赖htc了，所以在IE9, IE10下浏览，都没问题，效果又回来了，就是代码有点冗长了。

如果换做用JQuery.js重写：

<html>
<head>
    <title id="1">asdf</title>
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <script src="jquery-1.7.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("h1").mouseover(function () {
                $("h1").css("color", "blue");
            });
            $("h1").mouseout(function () {
                $("h1").css("color", "black");
            });
        });  

    </script>
</head>
<body >
　　<h1 >把鼠标放在这里</h1>
</body>
</html>

感觉清爽很多了，同时，颜色不再支持数字，要用英文表示了，这样也好，一目了然，知道是什么意思。

通过前文(自定义属性) 和此文(事件) 可以总结出，虽然ms不再支持htc了，但迁移它到js上的代价并不太大，基本上原来的代码都能用，只不过htc中有些旧的写法要换成新写法就好！

posted on 2013-01-10 21:12 BobLiu 阅读(2242) 评论(0) 编辑收藏举报