典型的javascript兼容问题

//一些常见的兼容性问题，仅供参考

一 nextSibling

<ul>
    <li id="item1"></li>
    <li id="item2"></li>
    <li id="item3"></li>
</ul>
<script type="text/JavaScript">
    var item1 = document.getElementById("item1");
    alert(item1.nextSibling.nodeType);
    alert(document.getElementsByTagName("ul")[0].childNodes.length);
</script>

  

//IE下弹出1和3 表明item1的nextSibling类型为DOM节点，ul里的子节点个数3

//Firefox弹出3和7，表明item1的nextSibling类型为文本节点，ul里的子节点个数7

<script type="text/javascript">
    function getNextNode(node) {
        node = typeof node == "string" ? document.getElementById(node) : node;
        var nextNode = node.nextSibling;
        if (!nextNode) return null;
        if (!document.all) {
            while (true) {
                if (nextNode.nodeType == 1) {
                    break;
                } else {
                    if (nextNode.nextSibling) {
                        nextNode = nextNode.nextSibling;
                    } else {
                        break;
                    }
                }
            }
        }
        return nextNode;
    }
    var nextNode = getNextNode("item1");
    alert(nextNode.id);
    var nextNode2 = getNextNode("item2");
    alert(nextNode2.id);
</script>

 

 

二 透明度

IE下透明度是用滤镜实现的，而在Firefox下CSS的opactity属性实现的。

 <style type="text/CSS">

    #test1 {

        background: blue;

        height: 100px;

    }

 

    #test2 {

        background: green;

        height: 100px;

    }

</style>

<div id="test1"></div>

<div id="test2"></div>

<script type="text/JavaScript">

    function setOpacity(node, level) {

        node = typeof node == "string" ? document.getElementById(node) : node;

        if (document.all) {

            node.style.filter = 'alpha(opacity=' + level + ')';

        } else {

            node.style.opacity = level / 100;

        }

    }

    setOpacity("test1", 20);

    setOpacity("test2", 80);

</script>

 

三 event对象

IE下event对象作为window的属性作用于全局的，Firefox中，event对象是作为事件对象的参数存在的。

代码清单 兼容 IE 和 firefox 的 event 对象 

<input id="wrapper" type="button" value="click me"/>

<span id="span">hello world</span>

<script type="text/JavaScript">

    function getEventTarget(e) {

        // 下面可以用e来做点什么事，e在IE和Firefox下都指向了event对象 

        e = window.event || e;

        // 兼容 srcElement 和 target 

        var host = e.srcElement || e.target;

        return host ;

    }

    document.getElementById("wrapper").onclick = function(e) {

        var node = getEventTarget(e);

        alert(node.tagName);

    }

    document.getElementById("span").onclick = function(e) {

        var node = getEventTarget(e);

        alert(node.tagName);

    }

</script>

 

// 阻止事件冒泡

<script type="text/JavaScript">

    function stopPropagation(e) {

        e = window.event || e;

        if (document.all) { // only for IE

            e.cancelBubble = true;

        } else {

            e.stopPropagation();

        }

    }

</script>

 

// 绑定事件

<script type="text/JavaScript">

    function on(node, eventType, handler) {

        node = typeof node == "string" ? document.getElementById(node) : node;

        if (document.all) { // only for IE

            node.attachEvent("on" + eventType, handler);

        } else {

            node.addEventListener(eventType, handler, false);

        }

    }

</script>