1 事件库的复习及最终版封装
- 依赖的库：不依赖任何库；
- 使用方法：
- 为全局函数调用；
- 系统行为事件绑定：on(ele,type,fn);解除绑定：off(ele,type,fn)
- 绑定及执行结果：所有浏览器兼容，但事件触发时，fn中this为ele，即元素，默认传入一个事件对象实参
- 自定义行为事件绑定：on(ele,type,fn);执行：fire.call(ele,type,e);解绑：off(ele,type,fn)；
- 绑定时on中的ele为元素，fire函数在调用时必须保证里面的this为元素；type自定义行为的开头必须以my开头；
- 绑定及执行结果：fire作为接口放在函数中执行，如果未用on绑定方法，里面无执行函数；当用on绑定方法后，就会在预留接口处执行方法；用于订阅发布；执行的函数中的this为当前元素；
- 改变函数的this执行：processThis(fn,thisArg)即：将fn中的this指向改变为thisArg
- 执行结果：将fn中的this指向改变为thisArg，并给fn传一个实参e,一般跟事件配合，返回一个匿名函数；
- 注意：
- 绑定自定义行为事件时，on里面的参数ele可以是元素也可以是实例对象，但事件库主要用于给元素绑定系统行为或自定义行为，所以参数ele为元素；一般不设置实例对象；
- 代码：
- 执行代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件库最终版封装</title> <style> body{ height: 1000px; } div{ width: 200px; height: 200px; background-color: red; } </style> </head> <body> <div id="div1">111</div> <script src="复习JS库/01Event.js"></script> <script> var oDiv=document.getElementById("div1"); on(oDiv,"mymeinv",fn1); on(oDiv,"mymeinv",fn2); on(oDiv,"mymeinv",fn3); //off(oDiv,"mymeinv",fn3); function fn1(e) { console.log(this.innerHTML); console.log(e.pageY); } function fn2() { console.log(2); } function fn3() { console.log(3); } on(oDiv,"click",fn4); function fn4(e){ fire.call(this,"mymeinv",e); } //processThis函数验证 function add(e) { console.log(this); console.log(e.type); } on(oDiv,"click",processThis(add,oDiv)); </script> </body> </html>- 事件库终极版封装
function on(ele,type,fn) { if(/^my/gi.test(type)){//绑定的是自定义行为，必须以my开头 //事件库中ele均为元素 if(!ele[type]){ ele[type]=[]; } var b=ele[type]; if(b.length){ for(var i=0; i<b.length; i++){ if(b[i]===fn) return; } } b.push(fn); }else{//绑定的是系统行为，如click,mousemove等 //浏览器的兼容 if(ele.addEventListener){ ele.addEventListener(type,fn,false); }else{//IE浏览器 if(!ele["on"+type]){ ele["on"+type]=[]; //将run方法绑定到系统事件池中 ele.attachEvent("on"+type,function (e) { run.call(ele,e);//保证run中的this指向为当前元素；在IE浏览器下事件触发，不会给匿名函数传事件对象实参； }) } var a=ele["on"+type]; //去重处理，避免重复绑定 if(a.length){ for(var i=0; i<a.length; i++){ if(a[i]===fn) return; } } a.push(fn); } } } //fire函数相当于一个接口，在某个位置执行on绑定的type行为上的所有方法； function fire(type,e) { //fire中的this可以指元素，也可以指实例对象，与on中相对应； var b=this[type] || []; if(b.length){ for(var i=0; i<b.length; i++){ if(typeof b[i]==="function"){ b[i].call(this,e);//保证函数执行时，里面的this为当前this，即为元素，并传入实参e; }else{ b.splice(i,1); i--; } } } } function run(e) { e= e || window.event; //e的兼容处理 e.target=e.srcElement; e.pageX=(document.documentElement.scrollLeft || document.body.scrollLeft)+e.clientX; e.pageY=(document.documentElement.scrollTop || document.body.scrollTop)+e.clientY; //阻止默认事件 e.preventDefault=function () { e.returnValue=false; }; //阻止冒泡 e.stopPropagation=function () { e.cancelBubble=true; }; //遍历run执行函数，保证函数中的this为当前元素，而且给其传实参e var a=this["on"+e.type];//this为当前元素 if(a.length){ for(var i=0; i<a.length; i++){ if(typeof a[i]==="function"){ a[i].call(this,e); }else{ a.splice(i,1); i--;//防止数组塌陷 } } } } function off(ele,type,fn) { if(/^my/gi.test(type)){ var b=ele[type]; if(b.length){ for(var i=0; i<b.length; i++){ if(b[i]===fn){ b[i]=null; break; } } } }else{ if(ele.removeEventListener){ ele.removeEventListener(type,fn,false); }else{ var a=ele["on"+type]; if(a.length){ for(var i=0; i<a.length; i++){ if(a[i]===fn){ a[i]=null; break;//性能优化； } } } } } } //改变函数的this执行 function processThis(fn,thisArg) { return function (e) { fn.call(thisArg,e); } }
2 运动库的复习及最终版封装
- 依赖的库：依赖utils库，用于接口使用时，依赖Event事件库；
- 使用方法：
- 代码：
animate(opt);为全局函数调用； - 参数：对象opt
- 必须传的参数：1）ele:元素，指需要运动的元素；2）target：属性值为对象，对象中的键值对为目标值；
- 可传可不传的参数：1）duration:运动总时间，默认为2000ms；2）effect:运动方式，可以是字符串，也可以是数字，默认为Linear线性运动；3）callback：不传不执行，传了之后执行函数，函数中this被设置为元素；
- 代码：
- 注意点：在运动结束后，设置一个fire接口，接口的类型为myAnimate，若需要执行操作，可用on在元素身上绑定该行为的方法；fire接口中设置的this为该元素，即绑定的方法执行时，函数中的this为该元素；
- 执行结果：
- 目的：一个元素从开始位置(ele)在规定时间(duration)内，以什么样的运动形式(effect)，到达指定目的地(target)，执行什么动作(callback或fire接口执行)；
- 代码：
- 执行代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>运动库验证</title> <style> *{ margin: 0; padding: 0; } #div1{ width: 80px; height: 80px; background-color: red; line-height: 80px; text-align: center; position: absolute; top: 10px; left:200px; opacity: 0.1; filter: alpha(opacity=10); } #div2{ width: 1px; height: 500px; margin-top: 10px; background-color: blue; position: absolute; top: 10px; left: 1100px; } </style> </head> <body> <div id="div1">物体</div> <div id="div2"></div> <script src="复习JS库/00utils.js"></script> <script src="复习JS库/01Event.js"></script> <script src="复习JS库/02Animate.js"></script> <script> var oDiv1=document.getElementById("div1"); function fn1(){ //此时函数中的this为元素； console.log(this.innerHTML); this.style.border="5px solid pink"; this.innerHTML="我成功了，祝贺我吧！"; this.style.fontSize="10px"; this.style.lineHeight="10px"; } //绑定myAnimate行为，执行方法 on(oDiv1,"myAnimate",fn1); animate({ ele:oDiv1, target:{ left:1000, top:400, opacity: 0.8 }, effect:6, duration: 2000 //此时callback可以不用，可以用预留的接口，然后进行绑定执行； /*callback:function () { //默认情况下回调函数执行时，this指向window; //在调用时，用call改变this指向为ele； this.style.backgroundColor="yellow"; }*/ }) </script> </body> </html>- 封装代码：
(function () { //运动形式对象 var gbEffect= { Linear: function (t, b, c, d){ //匀速 return c*t/d + b; }, EaseIn: function(t, b, c, d){ //加速曲线 return c*(t/=d)*t + b; }, EaseOut: function(t, b, c, d){ //减速曲线 return -c *(t/=d)*(t-2) + b; }, EaseBoth: function(t, b, c, d){ //加速减速曲线 if ((t/=d/2) < 1) { return c/2*t*t + b; } return -c/2 * ((--t)*(t-2) - 1) + b; }, EaseInStrong: function(t, b, c, d){ //加加速曲线 return c*(t/=d)*t*t*t + b; }, EaseOutStrong: function(t, b, c, d){ //减减速曲线 return -c * ((t=t/d-1)*t*t*t - 1) + b; }, EaseBothStrong: function(t, b, c, d){ //加加速减减速曲线 if ((t/=d/2) < 1) { return c/2*t*t*t*t + b; } return -c/2 * ((t-=2)*t*t*t - 2) + b; }, Elastic:{ In: function(t, b, c, d, a, p){ //正弦衰减曲线（弹动渐入） if (t === 0) { return b; } if ( (t /= d) == 1 ) { return b+c; } if (!p) { p=d*0.3; } if (!a || a < Math.abs(c)) { a = c; var s = p/4; } else { var s = p/(2*Math.PI) * Math.asin (c/a); } return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; }, Out: function(t, b, c, d, a, p){ //正弦增强曲线（弹动渐出） if (t === 0) { return b; } if ( (t /= d) == 1 ) { return b+c; } if (!p) { p=d*0.3; } if (!a || a < Math.abs(c)) { a = c; var s = p / 4; } else { var s = p/(2*Math.PI) * Math.asin (c/a); } return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; }, Both: function(t, b, c, d, a, p){ if (t === 0) { return b; } if ( (t /= d/2) == 2 ) { return b+c; } if (!p) { p = d*(0.3*1.5); } if ( !a || a < Math.abs(c) ) { a = c; var s = p/4; } else { var s = p/(2*Math.PI) * Math.asin (c/a); } if (t < 1) { return - 0.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; } return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b; } }, Back:{ In: function(t, b, c, d, s){ //回退加速（回退渐入） if (typeof s == 'undefined') { s = 1.70158; } return c*(t/=d)*t*((s+1)*t - s) + b; }, Out: function(t, b, c, d, s){ if (typeof s == 'undefined') { s = 3.70158; //回缩的距离 } return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; }, Both: function(t, b, c, d, s){ if (typeof s == 'undefined') { s = 1.70158; } if ((t /= d/2 ) < 1) { return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; } return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; } }, Bounce:{ In: function(t, b, c, d){ //弹球减振（弹球渐出） return c - gbEffect.Bounce.Out(d-t, 0, c, d) + b; }, Out: function(t, b, c, d){ if ((t/=d) < (1/2.75)) { return c*(7.5625*t*t) + b; } else if (t < (2/2.75)) { return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b; } else if (t < (2.5/2.75)) { return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b; } return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b; }, Both: function(t, b, c, d){ if (t < d/2) { return gbEffect.Bounce.In(t*2, 0, c, d) * 0.5 + b; } return gbEffect.Bounce.Out(t*2-d, 0, c, d) * 0.5 + c*0.5 + b; } } }; var gbEffectAry=["Linear","EaseIn","EaseOut","EaseBoth","EaseInStrong","EaseOutStrong","EaseBothStrong","Elastic-In","Elastic-Out","Elastic-Both","Back-In","Back-Out","Back-Both","Bounce-In","Bounce-Out","Bounce-Both"]; //运动库封装 function animate(opt) { //0 对传入的实参值进行判断； opt=opt || {}; if(!opt.ele) return;//如果传参错误，代码阻断不执行； //1 新建一个对象，里面添加默认样式 var defaultOpt={ duration: 2000, effect: "Linear" }; //2 将传入的实参opt，所有属性赋值给defaultOpt，如果存在，则重新赋值，如果不存在，使用默认值； for(var attr in opt){ defaultOpt[attr]=opt[attr]; } //总结：defaultOpt的作用是设置默认的属性，如果传入的实参里面设置了defaultOpt里面的属性，就重新赋值，如果没有设置，就用默认值； //下面所有代码不再使用opt，而使用defaultOpt; //3 获取defaultOpt里面的参数 var ele=defaultOpt.ele; var target=defaultOpt.target; var duration=defaultOpt.duration; var callback=defaultOpt.callback; var effect=defaultOpt.effect; var tempEffect=null; //4 获取运动形式，计算参数 //4.1 获取运动形式：判断effect的数据类型，满足下面两种情况，就执行各自的代码，如果不满足，就使用默认值； var ary=gbEffectAry; if(typeof effect==="number"){ ary=ary[effect%ary.length].split("-"); tempEffect=ary.length>=2?gbEffect[ary[0]][ary[1]]:gbEffect[ary[0]]; }else if(typeof effect==="object"){ tempEffect=effect.length>=2?gbEffect[effect[0]][effect[1]]:gbEffect[effect[0]]; }else if(typeof effect==="string"){ tempEffect=gbEffect[effect];//此时tempEffect设置一个函数定义地址，不是函数名； } //4.2 计算传入运动形式中的参数 var begin={},change={}; for(var attr in target){ begin[attr]=utils.css(ele,attr); change[attr]=target[attr]-begin[attr]; } var time=0; //5 添加定时器 var timer=setInterval(function () { //5.1 变量累加 time+=30; //5.2 边界值判断 if(time>=duration){ //5.2.1 设置边界值 utils.css(ele,target); //5.2.2 停止定时器 clearInterval(timer); //5.2.3 执行回调函数，进行下一步操作 callback && callback.call(ele);//当callback存在的时候，执行回调函数，改变其中的this指向为元素； //增加接口，用于绑定多个操作，执行函数，如果不绑定就不会执行方法； fire.call(ele,"myAnimate"); //5.2.4 阻断程序执行 return; } //5.3 获取最新位置及设置最新位置 for(var attr in change){ //5.3.1 运动方式获取最新位置； var cur=tempEffect(time,begin[attr],change[attr],duration); //5.3.2 分别设置最新位置 utils.css(ele,attr,cur); } },30) } window.animate=animate;//将私有函数设置为全局变量； })();
3 ajax库的复习及最终版封装
- 依赖的库：不依赖任何库；
- 使用方法：
- 代码：
03myAjax(opt);为全局函数调用； - 参数：对象opt
- data：对象，里面的键值对为搜索参数；
- type：get/post/jsonp；
- get、post用于本地数据获取，不能跨域获取；
- jsonp用于跨域获取，需注意的是在百度服务器中必须设置jsonp参数为cb才能获取数据；
- 代码：
- 代码：
- 执行代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>封装的ajax</title> </head> <body> <script src="JS库终极版/03myAjax.jsjs"></script> <script> 03myAjax({ url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su", data:{wd:"zhouxingchi"}, type:"jsonp", dataType:"json", jsonp:"cb",//此处必须设置jsonp为cb，才能使用 success:function (data) { console.log(data); } }); </script> </body> </html>- JS库封装代码：
//参数：ajax({url:xxx,data:xxx,type:xxx,dataType:xxx,jsonp:xxx,fnLoading:xxx,complete:xxx,success:xxx,error:xxx,timeout}) //将对象中的属性名和属性值转化为key=val&key=val的形式 function json2url(obj) { //参数：对象，返回值：字符串 //思路：对象-数组-字符串 obj.t=Math.random();//避免缓存 var ary=[]; //遍历对象 for(var attr in obj){ ary.push(attr+"="+obj[attr]); } return ary.join("&"); } function jsonParse(strJson) { return "JSON" in window?JSON.parse(strJson):eval("("+strJson+")"); } function 03myAjax(json) { json=json||{}; //如果json中请求地址url不存在 if(!json.url) return; //参数获取 var url=json.url; //data属性值为一个对象，对象中为参数 var data=json.data||{}; var type=json.type||"get"; var jsonp=json.jsonp||"callback"; var timeout=json.timeout||3000; var timer=null; //四步： //1 创建一个xml对象 //每个类函数都是window的一个属性； if(window.XMLHttpRequest){ var xml=new XMLHttpRequest(); }else{//IE6兼容处理 var xml=new ActiveXObject("Microsoft.XMLHTTP"); } //2 打开地址；3 发送请求 //get请求：参数在地址中，在url?的后面，以键值对的形式连接； //post请求：参数在请求体中，地址url后面不跟参数； switch(type.toLowerCase()){ case "get": xml.open("get",url+"?"+json2url(data),true); xml.send(null); break; case "post": xml.open("post",url,true); xml.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xml.send(json2url(data)); break; case "jsonp": //新建一个全局函数 var kbfd="jsonp_"+Math.random(); kbfd=kbfd.replace(".","");//函数名中不能存在小数点，所以需要替换 window[kbfd]=function (data) { json.success && json.success(data); //卸磨杀驴，干掉script document.body.removeChild(oS); oS=null; }; data[jsonp]=kbfd; //创建script标签，设置其src，通过script发送请求 var oS=document.createElement("script"); //script中src包含url?参数&cb=kbfd oS.src=url+"?"+json2url(data); //script必须插入到页面的底部 document.body.appendChild(oS); break; } //响应请求之前的准备 json.fnLoading && json.fnLoading(); //4 响应请求 xml.onreadystatechange=function () { if(xml.readyState===4){ //请求成功 json.complete && json.complete(); clearTimeout(timer); //判断后台响应成功还是失败； if(/^2\d{2}$/.test(xml.status)){//响应成功 if(json.dataType==="json"){ json.success && json.success(jsonParse(xml.responseText)); }else{ json.success && json.success(xml.responseText); } }else{//响应失败 json.error && json.error(xml.status); } } }; if(type==="jsonp") return; //5 等待超时 timer=setTimeout(function () { alert("您的网络不行啊"); xml.onreadystatechange=null; },timeout); }
4 拖拽库复习及最终版封装
- 依赖的库：Event事件库
- 使用方法：
- 代码：
var res=new Drag(opt);为实例创建调用； - 参数：对象opt;
- ele:必须穿，为拖拽元素；
- 执行结果：元素纯净版拖拽，无边界值判断，可拖拽到任何地方；
- 代码：
- 扩展功能：
- 预留接口：给实例对象绑定了三个自定义行为：myDragDown myDragMove myDragUp
- 在鼠标按下事件中，添加自定义行为myDragDown
- 在鼠标移动事件中，添加自定义行为myDragMove
- 在鼠标抬起事件中，添加自定义行为myDragUp
- 绑定代码：
res.on("myDragDown",fn1).on("myDragMove",fn2).on("myDragUp",fn3).off("myDragUp",fn3)，链式操作绑定； - 执行结果：绑定的方法函数fn1,fn2等，函数中的this为实例对象，并传入事件对象e;
- 预留接口：给实例对象绑定了三个自定义行为：myDragDown myDragMove myDragUp
- 代码：
- 执行代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖拽Drag库封装验证</title> <style> div{ width: 200px; height: 200px; background-color: red; position: absolute; left: 0; top: 0; } </style> </head> <body> <div id="div">111</div> <script src="JS库终极版/01Event.js"></script> <script src="JS库终极版/04Drag.js"></script> <script> var oDiv=document.getElementById("div"); var res=new Drag({ ele:oDiv }); res.on("myDragDown",fn1).on("myDragMove",fn2).on("myDragUp",fn3).off("myDragUp",fn3);//链式操作 function fn1() { console.log(this);//this为实例 console.log(1) } function fn2() { console.log(2) } function fn3() { console.log(3) } </script> </body> </html>- JS封装代码：
//EventEmitter类：给实例对象的自定义行为绑定多个方法，订阅发布执行 function EventEmitter() {} EventEmitter.prototype.on=function (type,fn) { if(!this[type]){ this[type]=[]; } var a=this[type]; if(a.length){ for(var i=0; i<a.length; i++){ if(a[i]===fn) return; } } a.push(fn); return this;//进行链式操作 }; EventEmitter.prototype.fire=function(type,e){ //保证fire函数执行时，里面的this为实例对象； var a=this[type] || []; if(a.length){ for(var i=0; i<a.length; i++){ if(typeof a[i]==="function"){ a[i].call(this,e);//保证函数执行时，里面的this为实例对象，并传事件对象实参； }else{ a.splice(i,1); i--; } } } }; EventEmitter.prototype.off=function (type,fn) { var a=this[type]; if(a.length){ for(var i=0; i<a.length; i++){ if(a[i]===fn){ a[i]=null; break; } } } }; //Drag类：拖拽 function Drag(opt) { opt=opt||{}; if(!opt.ele) return; this.ele=opt.ele; this.disX=null; this.disY=null; this.DOWN=null; this.MOVE=null; this.UP=null; this.init(); } //原型链继承 Drag.prototype=new EventEmitter(); //原型链继承后，原型上没有自己类的constructor属性，需要重新设置 Drag.prototype.constructor=Drag; //原型上公共方法 Drag.prototype.init=function () { //绑定down事件； this.DOWN=processThis(this.down,this); on(this.ele,"mousedown",this.DOWN); }; Drag.prototype.down=function (e) { //获取鼠标相对于元素的位置disX,disY this.disX=e.clientX-this.ele.offsetLeft; this.disY=e.clientY-this.ele.offsetTop; //绑定move,up事件 this.MOVE=processThis(this.move,this); this.UP=processThis(this.up,this); if(this.ele.setCapture){//IE浏览器 this.ele.setCapture();//焦点捕获 on(this.ele,"mousemove",this.MOVE); on(this.ele,"mouseup",this.UP); }else{//标准浏览器 //将事件绑定到document上，阻止默认事件发生； on(document,"mousemove",this.MOVE); on(document,"mouseup",this.UP); e.preventDefault(); } this.fire("myDragDown",e);//添加接口，实例对象调用fire公共方法，自定义行为是myDragDown }; Drag.prototype.move=function (e) { //获取新位置，无边界值判断 var l=e.clientX-this.disX; var t=e.clientY-this.disY; //设置新位置 this.ele.style.left=l+"px"; this.ele.style.top=t+"px"; this.fire("myDragMove",e);//添加接口，实例对象调用fire公共方法，自定义行为是myDragMove }; Drag.prototype.up=function (e) { if(this.ele.releaseCapture){ this.ele.releaseCapture();//释放焦点捕获； off(this.ele,"mousemove",this.MOVE); off(this.ele,"mouseup",this.UP); }else{ off(document,"mousemove",this.MOVE); off(document,"mouseup",this.UP); } this.fire("myDragUp",e);//添加接口，实例对象调用fire公共方法，自定义行为是myDragUp };
5 myBind函数封装
- 依赖的库：不依赖任何库
- 使用方法：
- 代码：
fn1.myBind(oDiv,2,3)； - 调用：函数名调用，myBind为函数类原型上的方法，所有函数均能调用；
- 参数：
- 第一个参数：thisArg，必须传，用于改变函数的this指向，不改变赋值null;
- 第二个参数：实参，可传可不传，如果需要实参则传，不需要则不传；
- 默认传入一个事件对象实参；多与事件配合；
- 返回值为一个匿名函数，即函数的预处理；
- 执行结果：改变fn1函数中的this指向为thisArg，给fn1传实参，与事件对象配合默认传入一个事件对象实参；返回一个匿名函数；
- 代码：
- 代码：
- 执行代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>myBind函数封装验证</title> <style> div{ width: 200px; height: 200px; background-color: red; } </style> </head> <body> <div id="div1">1111</div> <script src="JS库终极版/05myBind.js"></script> <script> var oDiv=document.getElementById("div1"); function fn1(n,m,e){ console.log(this.innerHTML); console.log(n+m); console.log(e.pageX); } oDiv.onclick=fn1.myBind(oDiv,2,3); </script> </body> </html>- JS封装代码：
(function () { Function.prototype.myBind=function (thisArg) { var outArg=[].slice.call(arguments,1); if("bind" in Function.prototype){ return this.bind.apply(this,[thisArg].concat(outArg)); } var _this=this; return function (e) { e=arguments.length===0?window.event:e; //IE浏览器下的兼容处理 e.target=e.srcElement; e.pageX=(document.documentElement.scrollLeft ||document.body.scrollLeft)+e.clientX; e.pageY=(document.documentElement.scrollTop || document.body.scrollTop)+e.clientY; //阻止默认事件 e.preventDefault=function () { e.returnValue=false; }; //阻止冒泡 e.stopPropagation=function () { e.cancelBubble=true; }; return _this.apply(thisArg,outArg.concat(e)); } }; })();
