//#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