Document 对象属性和方法的不兼容问题

缺乏、安全感 2024-04-18 18:56 64阅读 0赞

1.  **.bind不兼容的问题**  
    bind()方法主要就是将函数绑定到某个对象，bind()会创建一个函数，函数体内的this对象的值会被绑定到传入bind()第一个参数的值
    
        Function.prototype.bind = function () {
            var fn = this, args = Array.prototype.slice.call(arguments), object = args.shift();
            return function () {
                return fn.apply(object,
                    args.concat(Array.prototype.slice.call(arguments)));
            };
        };
2.  .**getElementsByClassName 不兼容的问题**  
    getElementsByClassName 方法可以获取具有指定class属性值的元素，返回值是一个集合。
    
        var getElementsByClassName = function (searchClass, node, tag) {
            var result = [];
            if (document.getElementsByClassName) {
                var nodes = (node || document).getElementsByClassName(searchClass);
                for (var i = 0; node = nodes[i++];) {
                    if (tag !== "*" && node.tagName === tag.toUpperCase()) {
                        result.push(node)
                    }
                }
                return result
            } else {
                node = node || document;
                tag = tag || "*";
                var classes = searchClass.split(" "),
                    elements = (tag === "*" && node.all) ? node.all : node.getElementsByTagName(tag),
                    patterns = [],
                    current,
                    match;
                var i = classes.length;
                while (--i >= 0) {
                    patterns.push(new RegExp("(^|\\s)" + classes[i] + "(\\s|$)"));
                }
                var j = elements.length;
                while (--j >= 0) {
                    current = elements[j];
                    match = false;
                    for (var k = 0, kl = patterns.length; k < kl; k++) {
                        match = patterns[k].test(current.className);
                        if (!match)  break;
                    }
                    if (match) result.push(current);
                }
                return result;
            }
        }
3.  **addEventListener不兼容的问题**  
    addEventListener()的工作原理是将实现EventListener的函数或对象添加到调用它的EventTarget上的指定事件类型的事件侦听器列表中。
    
        function myAddEvent(obj, ev, fn) {
            if (obj.attachEvent) {
                obj.attachEvent("on" + ev, fn);
            }
            else {
                obj.addEventListener(ev, fn, false);
            }
        }
4.  **.map不兼容的问题**

Array.prototype.myMap = function (fn, context) {
        context = context || window;
        var ary = [];
        if (Array.prototype.map) {
            ary = this.map(fn, context);
        } else {
            for (var i = 0; i < this.length; i++) {
                ary[i] = fn.apply(context, [this[i], i, this]);
            }
        }
        return ary;
    }

1.  **e.stopPropagation的兼容性问题**  
    不再派发事件。  
    终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。
    
        function stopPropagation(){
        
        e = window.event || e;
        if (document.all) {  //只有ie识别
            e.cancelBubble = true;
        } else {
            e.stopPropagation();
        }
        }
2.  **e.currentTarget的兼容性问题修复如下:**  
    currentTarget 事件属性返回其监听器触发事件的节点，即当前处理该事件的元素、文档或窗口。  
    在捕获和起泡阶段，该属性是非常有用的，因为在这两个节点，它不同于 target 属性。
    
        var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
        var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器
        var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器
        if (isIE) {
            var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
            reIE.test(userAgent);
            var fIEVersion = parseFloat(RegExp["$1"]);
            if (fIEVersion == 7 || fIEVersion == 8) {
                e=e.srcElement.parentElement;
            }else{
                e=e.currentTarget;
            }
        }else{
            e=e.currentTarget;
        }