CocoRoboDesktop/js/UForm/Compatible.js

//#region 浏览器兼容使用
/*
设置兼容性的写法 ie里面有innerText,outerHTML,而HTML5没有这些属性，为了使得TML5兼容ie特性，写了如下兼容js，HTML5也在逐步形成上诉函数。
*/
Namespace.register("U.UF.CP"); //C是compatible兼容的简写


//通过修改浏览器内置属性 设置兼容,添加兼容，此兼容模块兼容ie6以上，firefox,safiry,chrome
/**
* 滚轮事件兼容
*
* @param  {function} fun 滚动时触发的函数
*/
U.UF.CP.wheel = function (fun) {//onwheel支持所有html5浏览器  onmousewheel 支持所有非firefox的浏览器   DOMMouseScroll支持firefox浏览器
    this.onwheel = fun; //onwheel 事件在鼠标滚轮在元素上下滚动时触发
}

/**
* 滚轮事件兼容
*/
U.UF.CP.wheelGet = function () {
    return this.onwheel; //onwheel 事件在鼠标滚轮在元素上下滚动时触发
}

/**
* 打印标签之间的纯文本信息
*
* @param  {string} str 需要打印的元素的内容
*/
U.UF.CP.setInnerText = function (str) {//参数str  txt是内容   
    this.textContent = str; //获得元素的文本内容 = str
}
/**
* innerText与textContent的兼容处理
*/
U.UF.CP.setInnerTextGet = function () {
    return this.textContent; //获得元素的文本内容
}

/**
* 打印开始和结束标签之间的HTML
*
* @param  {string} str 字符串
*/
U.UF.CP.outerHtml = function (str) {
    var i,
        _this = U.selectEl(this), //i为变量
        _div = $$("div", { "innerHTML": str }).childNodes, //创建一个div 内容为str
        _create = $$("frag"); //  createDocumentFragment:创建一个 documentFragment 
    //循环插入
    for (i = 0; i < _div.length; i++) {//
        _create.appendChild(_div[i]); //在_create添加_div
    }
    _create.insertBefore(_create, this); //向列表中插入一个项目
    _this.remove(); //拷贝并删除本身
}
/**
* 打印开始和结束标签之间的HTML
*
* 给元素原型添加一个outerHtml方法
*/
U.UF.CP.outerHtmlGet = function () {
    var _copy = this.cloneNode(true); //克隆源元素
    var _div = $$("div", {}); //创建一个临时div，用于把克隆元素放入
    _div.appendChild(_copy); //div里面插入克隆元素
    return _div.innerHTML; /*如果不支持就使用innerhtml插入*/
}

/**
* 返回了元素上的样式表
*
* 给元素原型添加一个currentStyle方法
*/
U.UF.CP.getStyleGet = function () {
    return getComputedStyle(this, false); //返回的元素样式的属性
}

/**
* 可以将鼠标事件锁定在指定的元素上
*
* 给元素原型添加一个setCaptureGet方法
*/
U.UF.CP.setCapture = function () {
    return function () { //可以将鼠标事件锁定在指定的元素上
        window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
    }
}

/**
* 释放鼠标捕获
* 给元素原型添加一个releaseCaptureGet方法
*/
U.UF.CP.releaseCapture = function () {//兼容火狐
    return function () {
        window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP)
    } //释放鼠标捕获
}

/**
* 浏览器窗口被调整尺寸时发生
* @param  {function} fun 被调整的对象
*/
U.UF.CP.onresize = function (fun) {
    if (this.tagName) {//存在元素的标签名
        //设置Set事件
        var _position,
            _sizeelement = this.__SizeElement__; //自定义 __SizeElement__ 元素大小
        if (!_sizeelement || U.selectEl(_sizeelement).Parent() != this && fun) {//如果不存在SizeElement或者SizeElement的父级等于他本身并且存在el 往下执行
            _position = U.UF.EL.getStyle(this, "position");
            if (_position == "" || _position == "static") { this.style.position = "relative"; }
            _sizeelement = this.__SizeElement__ = $$("object", {//创建一个元素
                "onload": function () {
                    if (fun) {
                        _sizeelement.contentDocument.defaultView.onresize = function () {
                            fun();
                        }
                        // U.UF.C.apply(retElement, [[执行函数的事件]])
                        //retElement 将要绑定事件与属性的对象,如没有，可以传递null或者this，此处还需要优化，很多地方都会调用此函数，会导致速度降低。
                        //arr 时间和属性组成的参数数组 
                    }
                    else {
                        try {//try...catch语句将能引发错误的代码放在try块中，并且对应一个响应，然后有异常被抛出。
                            delete this.__SizeElement__;
                        } catch (e) { }
                    }
                }, //当触发onload时执行此函数
                "type": "text/html",
                "data": "about:blank",
                "style": {
                    "cssText": "display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1;visibility:hidden;margin:0;padding:0;"
                }
            }, this);
        }
        else {//如果上述条件不成立则直接往下执行
            if (fun) {
                _sizeelement.contentDocument.defaultView.onresize = function () { fun(); }
            }
            else {
                try {//try...catch语句将能引发错误的代码放在try块中，并且对应一个响应，然后有异常被抛出。
                    delete this.__SizeElement__;
                } catch (e) { }
            }
        }
    }
}
/**
* 浏览器窗口被调整尺寸时发生
*
* 给元素原型添加一个onresize方法
*/
U.UF.CP.onresizeGet = function () {
    try { //try...catch语句将能引发错误的代码放在try块中，并且对应一个响应，然后有异常被抛出。
        return this.__SizeElement__.contentDocument.defaultView.onresize;
    }
    catch (e) {
        return null;
    }
}

/**
* 代表事件的状态
* 比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
*/
U.UF.CP.eventGet = function () {//arguments.callee ->指向参数arguments对象的函数
    var _currentfun = arguments.callee;
    while (_currentfun.caller) { //一直往上寻找直到 寻找到顶层作用域 返回null 再往下执行
        _currentfun = _UDE.caller;
    }
    if (_currentfun.arguments[0]) { //对于火狐的兼容
        return _currentfun.arguments[0];
    }
    else {
        return null; //返回null
    }
}

/**
* 捕获当前事件作用的对象的兼容处理
*/
U.UF.CP.targetGet = function () {//支持firefox
    return event.target; //返回事件的目标节点（触发该事件的节点）
}

/**
* 获得键盘的按键码的兼容处理
*/
U.UF.CP.keyCodeGet = function () {
    return event.which; //获取按下的键盘按键Unicode值
}

/**
* onreadystatechange加载设置事件的兼容
*/
U.UF.CP.onreadystatechangeGet = function () {
    return this.onload; //当不兼容onreadystatechange的浏览器设置onreadystatechange的时候那么就相当于设置了onload
}

/**
* onreadystatechange加载获取事件的兼容
*/
U.UF.CP.onreadystatechange = function (cb) {
    this.onload = cb; //当不兼容onreadystatechange的浏览器获取onreadystatechange的时候那么就相当于获取onload
}

/**
* 特定事件返回对象在指定坐标下的位置。 outside 说明制定的位置在元素之外
*/
U.UF.CP.componentFromPoint = function () {
    return function () {
        var _position = U.UF.EL.getMousePosition();
        var _elinfo = U.UF.EL.getElementInfo(this);
        if ((_position["X"] > _elinfo["CW"] + _elinfo["TX"]) || (_position["Y"] > _elinfo["CH"] + _elinfo["TY"])) {
            return "outside";
        }
        return "";
    }
}

/**
* 在浏览器初始化的时候执行这个函数，给浏览器的兼容属性添加方法
*/
U.UF.CP.init = function () {
    //如果是html5浏览器,则执行判断内的内容，ie则不用进入下面内容。
    if (window.HTMLElement) {
        //注：   HTMLElement.prototype.__defineGetter__(event, fucntion)的作用是给指定的event设置得到的回调函数，如event=onmousewheel的时候，当我们给页面上任意的元素设置事件的时候会触发指定fucntion

        //当浏览器不支持onmousewheel滚轮事件的时候，给浏览器的全局HTMLElement设置滚轮事件，让页面上所有的元素都有onmousewheel这个事件
        //由于firefox不支持onmousewheel，这里利用__defineGetter__和__defineSetter__给HTMLElement绑定onmousewheel这个事件
        /*检测浏览器是否支持onmousewheel这个方法,Safiri,火狐没有这个方法*/
        if (!("onmousewheel" in HTMLElement.prototype)) {
            //IE里面或者safiri的处理方法？
            if ("onwheel" in HTMLElement.prototype) {
                //滚轮事件兼容处理，分为get获取和set设置处理
                HTMLElement.prototype.__defineGetter__("onmousewheel", U.UF.CP.wheelGet); //元素onmousewheel的get处理
                HTMLElement.prototype.__defineSetter__("onmousewheel", U.UF.CP.wheel); //元素onmousewheel的set处理
            }
            //火狐的滚动处理
            else {
                window.addEventListener("DOMMouseScroll", function (e) {
                    //监控Scroll事件
                    var _fun = null,
                    _currentevent = e.srcElement; //e.srcElement当前事件的源
                    do {
                        _fun = U.selectEl(_currentevent).attr("onmousewheel") || _currentevent.onmousewheel;
                        _currentevent = U.selectEl(_currentevent).Parent();
                    }
                    while (!(_fun || !_currentevent)); //冒泡的顶部获取
                    if (_fun) {//如果存在_fun
                        if (U.UF.C.isString(_fun)) {//判断_fun 是否为字符串
                            _currentevent.onmousewheel = new Function(_fun);
                        }
                        U.UF.EV.stopDefault();    //阻止页面固定事件
                        //异步执行 解决卡死的bug
                        setTimeout(function () {
                            obj.call(this, e);
                        }, 0);
                    }
                }, false);
            }
        }


        //当浏览器不支持onreadystatechange的时候，给浏览器的全局HTMLElement设置onload，让页面上所有的元素都有onreadystatechange这个事件
        //由于chrome和friefox不支持onreadystatechange，这里利用__defineGetter__和__defineSetter__给HTMLElement绑定onreadystatechange这个事件
        //        if (!("onreadystatechange" in HTMLElement.prototype)) {
        //            HTMLElement.prototype.__defineGetter__("onreadystatechange", U.UF.CP.onreadystatechangeGet); //onreadystatechange加载设置事件的兼容
        //            HTMLElement.prototype.__defineSetter__("onreadystatechange", U.UF.CP.onreadystatechange); //onreadystatechange加载设置事件的兼容
        //        }

        //当浏览器不支持innerText的时候，给浏览器的全局HTMLElement设置textContent，让页面上所有的元素都有innerText这个事件
        //由于低版本的firefox不支持innerText，这里利用__defineGetter__和__defineSetter__给HTMLElement绑定innerText这个事件
        if (!("innerText" in HTMLElement.prototype)) {/*检测浏览器是否支持innerText这个方法*/
            HTMLElement.prototype.__defineGetter__("innerText", U.UF.CP.setInnerTextGet); //给元素原型添加一个innerText事件并且绑定U.UF.CP.setInnerText
            HTMLElement.prototype.__defineSetter__("innerText", U.UF.CP.setInnerText);
        }

        //当浏览器不支持outerHTML的时候，给浏览器的全局HTMLElement设置innerHTML，让页面上所有的元素都有outerHTML这个事件
        //由于低版本的firefox(FF7-)不支持outerHTML，这里利用__defineGetter__和__defineSetter__给HTMLElement绑定outerHTML这个事件
        if (!("outerHTML" in HTMLElement.prototype)) {/*检测浏览器是否支持outerHTML这个方法*/
            HTMLElement.prototype.__defineGetter__("outerHTML", U.UF.CP.outerHtmlGet); //给元素原型添加一个outerHtml事件并且绑定U.UF.CP.outerHtml
            HTMLElement.prototype.__defineSetter__("outerHTML", U.UF.CP.outerHtml);
        }

        //当浏览器不支持currentStyle的时候，给浏览器的全局HTMLElement设置getComputedStyle事件，让页面上所有的元素都有currentStyle这个事件
        //由于低版本的firefox不支持currentStyle，这里利用__defineGetter__给HTMLElement绑定currentStyle这个事件
        if (!("currentStyle" in HTMLElement.prototype)) {/*检测浏览器是否支持currentStyle这个方法*/
            HTMLElement.prototype.__defineGetter__("currentStyle", U.UF.CP.getStyleGet); //给元素原型添加一个currentStyle事件并且绑定U.UF.CP.getStyle    
        }

        //当浏览器不支持setCapture的时候，给浏览器的全局HTMLElement设置captureEvents事件，让页面上所有的元素都有setCapture这个事件
        //由于firefox不支持setCapture，这里利用__defineGetter__给HTMLElement绑定setCapture这个事件
        if (!("setCapture" in HTMLElement.prototype)) {
            HTMLElement.prototype.__defineGetter__("setCapture", U.UF.CP.setCapture); //给元素原型添加一个setCapture事件并且绑定U.UF.CP.setCapture
        }

        //当浏览器不支持releaseCapture的时候，给浏览器的全局HTMLElement设置releaseEvents事件，让页面上所有的元素都有releaseCapture这个事件
        //由于firefox不支持releaseCapture，这里利用__defineGetter__给HTMLElement绑定releaseCapture这个事件
        if (!("releaseCapture" in HTMLElement.prototype)) {
            HTMLElement.prototype.__defineGetter__("releaseCapture", U.UF.CP.releaseCapture); //给元素原型添加一个releaseCapture事件并且绑定U.UF.CP.releaseCapture
        }

        //当浏览器不支持onresize的时候，给浏览器的全局HTMLElement设置focus，让页面上所有的元素都有onresize这个事件
        //由于低版本的firefox不支持onresize，这里利用__defineGetter__和__defineSetter__给HTMLElement绑定onresize这个事件
        if (!("onresize" in HTMLElement.prototype) || !(U.UF.CI.getBrowser().browser == "msie")) { /*检测浏览器是否支持onfocus事件*/
            HTMLElement.prototype.__defineGetter__("onresize", U.UF.CP.onresizeGet); //给元素原型添加一个onresize事件并且绑定U.UF.CP.onresize
            HTMLElement.prototype.__defineSetter__("onresize", U.UF.CP.onresize);
        }
        /*检测浏览器是否支持componentFromPoint事件*/
        if (!("componentFromPoint" in HTMLElement.prototype)) {
            HTMLElement.prototype.__defineGetter__("componentFromPoint", U.UF.CP.componentFromPoint); //当获取元素的componentFromPoint时候出发该函数
        }

        //当浏览器不支持event的时候，给浏览器的全局HTMLElement设置releaseEvents，让页面上所有的元素都有event这个事件
        //由于firefox不支持event，这里利用__defineGetter__给HTMLElement绑定event这个事件
        if (!("event" in window.constructor.prototype)) { /*检测浏览器是否支持event事件*/
            window.constructor.prototype.__defineGetter__("event", U.UF.CP.eventGet); //给元素原型添加一个event事件并且绑定U.UF.CP.event
        }
        //给window.event添加兼容属性方法
        if (window.Event.prototype) {
            //当浏览器不支持srcElement的时候，给浏览器的全局HTMLElement设置target事件，让页面上所有的元素都有srcElement这个事件
            //由于firefox不支持srcElement，这里利用__defineGetter__给HTMLElement绑定srcElement这个事件
            if (!("srcElement" in window.Event.prototype)) {/*检测浏览器是否支持srcElement事件*/
                window.Event.__defineGetter__("target", U.UF.CP.targetGet); //给元素原型添加一个target事件并且绑定U.UF.CP.target
            }
            //当浏览器不支持keyCode的时候，给浏览器的全局HTMLElement设置which事件，让页面上所有的元素都有keyCode这个事件
            //由于firefox不支持keyCode，这里利用__defineGetter__给HTMLElement绑定keyCode这个事件
            if (!("keyCode" in window.Event.prototype) && window.Event.__defineGetter__) {
                window.Event.__defineGetter__("keyCode", U.UF.CP.keyCodeGet); //给元素原型添加一个keyCode事件并且绑定U.UF.CP.keyCheck
            }
        }
    }
}

//#region querySelector 兼容处理

U.UF.C.style; //防止选择器创建多个样式style

/**
* querySelectorAll 兼容
*
* @param  {string} 搜索的内容
* @param  {element} 搜索的元素区域
*/
document.querySelectorAll = document.querySelectorAll || function (str, el) {
    var _addstyle = U.UF.C.style, //判断是否已经添加了上style识别样式
        _returnarr = [], //创建一个空的数组
        _firstchild = document.documentElement.firstChild, //document.documentElement的第一个子元素
        _arr = (el || document).all, //搜索区域
        i = _arr.length; //_arr的长度

    //添加的style link
    try {
        _addstyle.styleSheet.cssText = str + "{q:1}";
    }
    catch (e) {
        U.UF.C.style = $$("style", {//U.UF.C.style:防止选择器创建多个样式style
            "type": "text/css",
            "styleSheet": {
                "cssText": str + "{q:1}"
            }
        }, _firstchild);
    }
    //全局筛选
    while (i--) {
        if (_arr[i].currentStyle.q) {
            _returnarr.unshift(_arr[i]);
        }
    }
    return _returnarr;
};

/**
* querySelector 兼容
*
* @param  {number} 搜索的内容
*/
document.querySelector = document.querySelector || function (num) {//返回文档中匹配指定 CSS 选择器的一个元素
    var _num = document.querySelectorAll(num);
    if (_num.length) {//如果_num存在
        return _num[0]; //返回_num[0]
    }
    else {//不存在
        return null; //返回null
    }
};

/**
* 选择元素区域 自定义搜索元素选择函数
*
* @param  {string} 搜索的内容
* @param  {object} 搜索的元素
*/
U.UF.CP.selectorElement = function (str, el) {
    var _ishasid = (el.id === "" && el != document), //判断是否支持选择器
        _query = $$("div").querySelectorAll;

    if (_ishasid) {//如果支持
        el.id = el.uniqueID; //uniqueID : 绝对唯一地标识一个 HTML 元素
    }
    try { //尝试执行代码块
        if (_query) {//如果浏览器支持querySelectorAll ，那么直接使用浏览器的
            return (el || document).querySelectorAll((el.id ? ("#" + el.id + " ") : " ") + str, el);
        }
        //否则调用上面自定义的方法
        else {
            return document.querySelectorAll((el.id ? ("#" + el.id + " ") : " ") + str, el);
        }
    }
    catch (e) {//捕获错误的代码块
        return null;
    }
    finally {//无论 try / catch 结果如何都会执行的代码块
        if (_ishasid) {
            el.id = "";
        }
    }
}

//#endregion

//#region 手机兼容处理，只要引用了uform框架，会自动使手机在滑动的过程中不会触发点击事件

/**
*  手机点击处理
*/
U.UF.CP.touch = function () {
    //这里有个bug如果多次引用uform的时候这里的事件会注册监视多次
    if (U.UF.C.touchstart) {
        U.UF.EV.delElementEvent("touchstart", document, U.UF.C.touchstart, true);
    }
    //监视touchstart，注册函数事件  U.UF.EV.addElementEvent(事件名称,添加事件的元素,事件触发后调用的函数,指定事件是否在捕获或冒泡阶段执行)
    U.UF.EV.addElementEvent("touchstart", document, U.UF.C.touchstart, true);
}

/**
*  touchstart处理
*/
U.UF.C.touchstart = function () {
    var i,
        _eventsrc = event.srcElement; //时间触发的元素
    //默认触发的时候是没有移动的状态
    U.UF.C.ismove = null;
    //停止事件分发
    U.UF.EV.stopBubble();
    //移除start事件事件取消，防止下面直接出发touch事件的时候给重复监听
    U.UF.EV.delElementEvent("touchstart", document, U.UF.C.touchstart, true);
    //直接执行touchstart事件
    U.UF.EV.simulatePhoneTouch(_eventsrc, "touchstart");
    //取消后重新添加事件进去 
    U.UF.EV.addElementEvent("touchstart", document, U.UF.C.touchstart, true);
    //监视在鼠标移动的处理
    U.UF.EV.addElementEvent("touchmove", document, U.UF.C.touchmove);
    //end事件等待
    U.UF.EV.addElementEvent("touchend", document, U.UF.C.touchend, true);
}

/**
*  touchmove处理
*/
U.UF.C.touchmove = function () { //移动监视
    U.UF.C.ismove = true; //设置鼠标在移动
    U.UF.EV.delElementEvent("touchmove", document, U.UF.C.touchmove); //移除鼠标移动事件
    U.UF.EV.simulatePhoneTouch(event.srcElement, "touchmove"); //执行事件touch移动的处理
    U.UF.EV.stopBubble(); //停止冒泡处理
}

/**
*  touchend处理
*/
U.UF.C.touchend = function () {
    U.UF.EV.delElementEvent("touchend", document, U.UF.C.touchend, true); //touchend抓取成功后的处理
    U.UF.EV.stopBubble(); //移除事件
    //如果用户的touchstart后没有处理touchmove事件，那么允许用户出发touchend事件
    if (!U.UF.C.ismove) {
        U.UF.EV.simulatePhoneTouch(event.srcElement, "touchend"); //触发touchend事件
    }
}

//#endregion