跨浏览操作,包容写法

By admin in 4858美高梅 on 2019年4月7日

滚动条距离(有些浏览器上边做协作)
document.documentElement.scrollTop || document.body.scrollTop

普遍包容 IE、 FF、 谷歌 Chrome

 

/*
 跨浏览器添加事件绑定
 obj : 必要绑定js时间的靶子
 type:  欲绑定的风浪类型,如:click ,mounseover 等事件  不要求添加on
 fn  :  触发的本子
*/
function addEvent(obj,type,fn){
  if(typeof obj.addEventListener !=’undefined’){ //W3C
     obj.add伊夫ntListener(type,fn,false) ; //false代表不抓获冒泡
  }else{  //IE   IE提供的增加事件绑定期存款在难题
     //为了便于删除事件
特将对象绑定的轩然大波都绑定在该对象自身上,删除的时候同样传递一个该指标即可
      if(!obj.events[type]){
      obj.events[type] = [] ; //成立多少个存放事件处理函数的数组
    //把第一次的事件处理函数先储存到第二个任务上
  if(obj[“on”+type]){
      obj.events[type][0] = fn;
  }
   }else{
      //同2个注册函数进行屏蔽,不添加到计数器中
   if (addEvent.equal(obj.events[type], fn)) return false;
   }
   //从第三次始发大家用事件计数器来储存
  obj.events[type][addEvent.ID++] = fn;
  //执行事件处理函数
  obj[‘on’ + type] = addEvent.exec;
  
  }
}

跨浏览操作,包容写法。事件监听完成包容:
if(elem.addEventListener){
elem.addEventListener(“click”,fn)
}else{
elem.attachEvent(“onclick”,fn);
}

官网地址:

 

//为各种事件分配3个计数器
addEvent.ID = 1;

事件目的
var ev=ev||window.event;

导读:在读书也许应用javascript的进度中,最为痛心的正是浏览器包容难题

 

//同一个登记函数进行屏蔽
addEvent.equal = function (es, fn) {
 for (var i in es) {
  if (es[i] == fn) return true;
 }
 return false;
}

归来事件触发时鼠标所在的靶子
var ele = event.srcElement || event.target;

1、Event对象

/*

 

撤回冒泡
if(event.stopPropagation){
event.stopPropagation(); //标准浏览器
}else{
event.cancaleBubble==true; //老ie
}

window.event (IE) ev(标准浏览器)

 跨浏览器添加事件绑定 

//执行事件处理函数
addEvent.exec = function (event) {
 var e = event || addEvent.fixEvent(window.event);
 var es = this.events[e.type];
 for (var i in es) {
  es[i].call(this, e);
 }
};

堵住浏览器暗中同意行为
function preventDefa(e){
if(window.event){
//IE中阻止函数器私下认可动作的诀要
window.event.returnValue = false;
}
else{
//阻止暗中认可浏览器动作(W3C)
e.preventDefault();
}
}
阻碍浏览器私下认可行为(高版本)
return false; 全数触发事件和动作都不会被执行. 能够用来替代
preventDefault

解决办法例子:

 obj : 需求绑定js时间的对象

 
//把IE常用的伊夫nt对象配对到W3C中去
addEvent.fixEvent = function (event) {
 event.preventDefault = addEvent.fixEvent.preventDefault;
 event.stopPropagation = addEvent.fixEvent.stopPropagation;
 event.target = event.srcElement;
 return event;
};

document.onclick = function(ev){

 type:  欲绑定的轩然大波类型,如:click ,mounseover 等事件  不须求添加on

//IE阻止默许行为
addEvent.fixEvent.preventDefault = function () {
 this.returnValue = false;
};

var ev = ev|| window.event;

 fn  :  触发的剧本

//IE阻止默许行为
addEvent.fixEvent.preventDefault = function () {
 this.returnValue = false;
};

alert(ev);

*/

//跨浏览器删除事件
function removeEvent(obj, type, fn) {
 if (typeof obj.removeEventListener != ‘undefined’) { //W3C
  obj.removeEventListener(type, fn, false);
 } else {
  for (var i in obj.events[type]) {
   if (obj.events[type][i] == fn) {
    delete obj.events[type][i];
   }
  }
 }
}

}

function addEvent(obj,type,fn){

 

二、JavaScript原生获取滚动距离

  if(typeof obj.addEventListener !=’undefined’){ //W3C

//跨浏览器获取窗口可视大小
 
function getInner(){
   if(typeof window.innerWidth !=’undefined’){
     return {
     width:window.innerWidth ,
  height:window.innerHeight
  }
   }else{
     return {
      width:document.documentElement.clientWidth ,
   height:document.documentElement.clientHeight
  }
   }
}

document.documentElement.scrollTop(标准浏览器)

     obj.add伊芙ntListener(type,fn,false) ; //false表示不抓获冒泡

//跨浏览器获取滚动条到左侧的垂直宽度
function getScollLeft(){
        var scrollPos; 
        if (window.pageXOffset) { 
        scrollPos = window.pageXOffset; } 
        else if (document.compatMode && document.compatMode !=
‘BackCompat’) 
        { scrollPos = document.documentElement.scrollLeft; } 
        else if (document.body) { scrollPos = document.body.scrollLeft;
}  
        return scrollPos; 
}

document.body.scrollTop (Google Chrome)

  }else{  //IE   IE提供的增加事件绑定存在难点 

//跨浏览器获取滚动条到顶部的垂直中度
function getScrollTop() { 
        var scrollPos; 
        if (window.pageYOffset) { 
        scrollPos = window.pageYOffset; } 
        else if (document.compatMode && document.compatMode !=
‘BackCompat’) 
        { scrollPos = document.documentElement.scrollTop; } 
        else if (document.body) { scrollPos = document.body.scrollTop;
}  
        return scrollPos;  
}

化解办法

     //为了便于删除事件
特将目的绑定的风浪都绑定在该对象自己上,删除的时候同样传递八个该目的即可 

//跨浏览器获取Style
function getStyle(element, attr) {
 if (typeof window.getComputedStyle != ‘undefined’) {//W3C
  return window.getComputedStyle(element, null)[attr];
 } else if (typeof element.currentStyle != ‘undeinfed’) {//IE
  return element.currentStyle[attr];
 }
}

var scrollTop = document.documentElement.scrollTop ||
document.body.scrollTop;

      if(!obj.events[type]){

//判断class是不是留存
function hasClass(element, className) {
 return element.className.match(new
RegExp(‘(\\s|^)”) +className
+'(\\s|$)”)));
}

3、FF浏览器下有空DIV的时候出现bug

      obj.events[type] = [] ; //成立3个存放事件处理函数的数组

//跨浏览器添加link规则
function insertRule(sheet, selectorText, cssText, position) {
 if (typeof sheet.insertRule != ‘undefined’) {//W3C
  sheet.insertRule(selectorText + ‘{‘ + cssText + ‘}’, position);
 } else if (typeof sheet.addRule != ‘undefined’) {//IE
  sheet.addRule(selectorText, cssText, position);
 }
}

化解办法:在拖拽的方式里面添加以下代码

    //把第2次的事件处理函数先储存到第三个岗位上

//跨浏览器移出link规则
function deleteRule(sheet, index) {
 if (typeof sheet.deleteRule != ‘undefined’) {//W3C
  sheet.deleteRule(index);
 } else if (typeof sheet.removeRule != ‘undefined’) {//IE
  sheet.removeRule(index);
 }
}

return false;//阻止私下认可事件

  if(obj[“on”+type]){

//获取Event对象
function getEvent(event){
  return event || window.event;
}

四、 滚轮事件:

      obj.events[type][0] = fn; 

 

onmousewheel (IE、谷歌(Google)) DOMMouseScroll(FF) wheelDelta
滚轮属性(IE、谷歌) detail滚轮属性(FF)

  }

//阻止暗中认可行为
function preDef(event) {
 var e = getEvent(event);
 if (typeof e.preventDefault != ‘undefined’) {//W3C
  e.preventDefault();
 } else {//IE
  e.returnValue = false;
 }
}

阻拦暗中同意事件:绑定写法:preventDefault

   }else{

//删除左后空格
function trim(str) {
 return str.replace(/(^\s*)|(\s*$)/g, ”);
}

window.onload = function() {

      //同一个登记函数举行屏蔽,不添加到计数器中

 

var item = document.getElementById(‘example’);

   if (addEvent.equal(obj.events[type], fn)) return false;

 

if (item.addEventListener) {

   }

 
 

item.add伊夫ntListener(‘DOMMouseScroll’, fn, false); //FF八个参数

   //从第三回初始大家用事件计数器来囤积

}

  obj.events[type][addEvent.ID++] = fn;

item.onmousewheel = fn;

  //执行事件处理函数

function fn(ev) {

  obj[‘on’ + type] = addEvent.exec;

var ev = ev || event;//event 事件相当处理

  

var flag = false;

  }

if (ev.wheelDelta) {

}

flag = ev.wheelDelta < 0 ? false : true;

 

}else{

//为各个事件分配贰个计数器

flag = ev.detail > 0 ? false : true;

addEvent.ID = 1;

}

 

if (flag) {

//同三个报了名函数实行屏蔽

item.style.height = item.offsetHeight – 10 + ‘px’;

addEvent.equal = function (es, fn) {

}else {

 for (var i in es) {

item.style.height = item.offsetHeight + 10 + ‘px’;

  if (es[i] == fn) return true;

}

 }

//阻止绑定事件

 return false;

if (ev.preventDefault) {

}

ev.preventDefault();

 

}else{

 

//阻止普通事件

 

return false;

 

}

//执行事件处理函数

}

addEvent.exec = function (event) {

}

 var e = event || addEvent.fixEvent(window.event);

5、监听事件包容性难题

 var es = this.events[e.type];

在 IE6 和FF 浏览器出现 IE6 特殊对待:对象.attach伊芙nt(事件名, 函数) IE陆解绑:对象.detach伊芙nt(事件名, 函数)
FF以及标准浏览器:对象.add伊芙ntListener(事件名,函数,是不是捕获 true ||
false) IE下绑定事件this指向window

 for (var i in es) {

HTML5 CSS3 JavaScript

  es[i].call(this, e);

 }

};

 

 

 

//把IE常用的伊芙nt对象配对到W3C中去

addEvent.fixEvent = function (event) {

 event.preventDefault = addEvent.fixEvent.preventDefault;

 event.stopPropagation = addEvent.fixEvent.stopPropagation;

 event.target = event.srcElement;

 return event;

};

 

 

//IE阻止暗许行为

addEvent.fixEvent.preventDefault = function () {

 this.returnValue = false;

};

 

//IE阻止私下认可行为

addEvent.fixEvent.preventDefault = function () {

 this.returnValue = false;

};

 

//跨浏览器删除事件

function removeEvent(obj, type, fn) {

 if (typeof obj.removeEventListener != ‘undefined’) { //W3C

  obj.removeEventListener(type, fn, false);

 } else {

  for (var i in obj.events[type]) {

   if (obj.events[type][i] == fn) {

    delete obj.events[type][i];

   }

  }

 }

}

 

 

 

 

//跨浏览器获取窗口可视大小

 

function getInner(){

   if(typeof window.innerWidth !=’undefined’){

     return {

     width:window.innerWidth ,

  height:window.innerHeight

  }

   }else{

     return {

      width:document.documentElement.clientWidth ,

   height:document.documentElement.clientHeight

  }

   }

}

 

 

//跨浏览器获取滚动条到右侧的垂直宽度

function getScollLeft(){

        var scrollPos;  

        if (window.pageXOffset) {  

        scrollPos = window.pageXOffset; }  

        else if (document.compatMode && document.compatMode !=
‘BackCompat’)  

        { scrollPos = document.documentElement.scrollLeft; }  

        else if (document.body) { scrollPos = document.body.scrollLeft;
}   

        return scrollPos;  

}

 

 

//跨浏览器获取滚动条到顶部的垂直高度

function getScrollTop() {  

        var scrollPos;  

        if (window.pageYOffset) {  

        scrollPos = window.pageYOffset; }  

        else if (document.compatMode && document.compatMode !=
‘BackCompat’)  

        { scrollPos = document.documentElement.scrollTop; }  

        else if (document.body) { scrollPos = document.body.scrollTop; }
  

        return scrollPos;   

}

 

//跨浏览器获取Style

function getStyle(element, attr) {

 if (typeof window.getComputedStyle != ‘undefined’) {//W3C

  return window.getComputedStyle(element, null)[attr];

 } else if (typeof element.currentStyle != ‘undeinfed’) {//IE

  return element.currentStyle[attr];

 }

}

 

 

//判断class是或不是留存

function hasClass(element, className) {

 return element.className.match(new RegExp(‘(\\s|^)’ +className
+'(\\s|$)’));

}

 

 

//跨浏览器添加link规则

function insertRule(sheet, selectorText, cssText, position) {

 if (typeof sheet.insertRule != ‘undefined’) {//W3C

  sheet.insertRule(selectorText + ‘{‘ + cssText + ‘}’, position);

 } else if (typeof sheet.addRule 4858美高梅,!= ‘undefined’) {//IE

  sheet.addRule(selectorText, cssText, position);

 }

}

 

//跨浏览器移出link规则

function deleteRule(sheet, index) {

 if (typeof sheet.deleteRule != ‘undefined’) {//W3C

  sheet.deleteRule(index);

 } else if (typeof sheet.removeRule != ‘undefined’) {//IE

  sheet.removeRule(index);

 }

}

 

//获取Event对象

function getEvent(event){

  return event || window.event;

}

 

 

 

//阻止暗中同意行为

function preDef(event) {

 var e = getEvent(event);

 if (typeof e.preventDefault != ‘undefined’) {//W3C

  e.preventDefault();

 } else {//IE

  e.returnValue = false;

 }

}

 

 

//删除左后空格

function trim(str) {

 return str.replace(/(^\s*)|(\s*$)/g, ”);

跨浏览器添加事件绑定 obj :
必要绑定js时间的对象 type: 欲绑定的事件类型,如:click ,mounseover
等事件 不须要添加on fn : 触发的脚本 */ f…

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有