美文网首页
JavaScript兼容

JavaScript兼容

作者: Moquyun | 来源:发表于2019-04-01 22:13 被阅读0次

// 属性的兼容,使用||解决
// 方法的兼容,使用if判断解决

  1. event事件获取兼容
//eve传入参数
var e = eve || window.event;

注意:event需要逐层传递,不要疏忽外部的function

  1. 非行内样式兼容
function getStyle(ele,attr){
    if(ele.currentStyle){
          return ele.currentStyle[attr];                  //IE
    }else{
          return getComputedStyle(ele,false)[attr];       //非IE
    }
}
alert(getStyle(obox,"background-color"));
console.log(getStyle(obox2,"background-color"));
  1. 获取按键ASCII码
var eve = eve || window.event
var keyC = eve.keyCode || eve.which

  1. 添加事件监听(IE兼容)
// 封装成函数
function addEvent(ele,type,callback){
        if(ele.addEventListener){
            ele.addEventListener(type,callback)
        }else if(ele.attachEvent){
            ele.attachEvent("on"+type,callback)
        }else{
            ele["on"+type] = callback;
        }
    }

function removeEvent(ele,type,callback){
        if(ele.removeEventListener){
            ele.removeEventListener(type,callback)
        }else if(ele.detachEvent){
            ele.detachEvent("on"+type,callback)
        }else{
            ele["on"+type] = null;
        }
    }
  //removeEvent(obox,"click",fn1)
// 封装成对象
    var myEvent = {
        add:function(ele,type,callback){
            if(ele.addEventListener){
                ele.addEventListener(type,callback)
            }else if(ele.attachEvent){
                ele.attachEvent("on"+type,callback)
            }else{
                ele["on"+type] = callback;
            }
        },
        remove:function(ele,type,callback){
            if(ele.removeEventListener){
                ele.removeEventListener(type,callback)
            }else if(ele.detachEvent){
                ele.detachEvent("on"+type,callback)
            }else{
                ele["on"+type] = null;
            }
        }
    }
  1. 阻止事件冒泡兼容
function stopBubble(e){
    if(e.stopPropagation){
        e.stopPropagation()
    }else{
        e.cancelBubble = true;//IE
    }
}
  1. 目标元素target兼容
target = e.target || e.srcElement;
  1. 阻止浏览器默认行为兼容
function(e){
    if(e.preventDefault){
        e.preventDefault();
     }else{
        window.event.returnValue = false;
     }
}

相关文章

  • jQuery基础:样式

    什么是jQuery? 轻量级的Javascript库 核心是Javascript 不仅兼容了css3,还兼容各种浏...

  • JavaScript基础知识总结(一)

    JavaScript - JavaScript兼容于ECMA标准,因此也称为ECMAScript。 调试...

  • 关于ts

    TypeScript 是微软开发的 JavaScript 的超集,TypeScript兼容JavaScript,可...

  • JavaScript兼容

    // 属性的兼容,使用||解决// 方法的兼容,使用if判断解决 event事件获取兼容 注意:event需要逐层...

  • jQuery介绍

    1. 轻量级的JavaScript库 2. 核心依然是JavaScript 3. 不仅兼容了CSS3,还兼容各种浏...

  • JavaScript基础知识1

    JavaScript JavaScript兼容于ECMA标准,因此也称为ECMAScript。 调试命令 变量的命...

  • js浏览器兼容问题

    随着javascript的发展一些属性不兼容低版本浏览器,javascript也做了以下调整来兼容低版本浏览器

  • python学习笔记-前端基础05-jQuery

    jQuery是对JavaScript的封装,极大的简化了JavaScript编程。jQuery优点:兼容主流浏览器...

  • javascript 事件兼容

    今天了解了js 的事件,以前写代码时并不会在意它的兼容问题,那么今天总结几个关于事件的兼容写法。 1、js中经常用...

  • Textarea 计数 兼容版

    很久以前的文章了 迁移至此 全兼容版javascript字符计数textarea, javascript字符计数t...

网友评论

      本文标题:JavaScript兼容

      本文链接:https://www.haomeiwen.com/subject/kgnybqtx.html