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