在js中好用的东西一般都存在兼容问题,以下,我整理了一些常用的兼容处理方法,自己用的时候可以把他们放在一个JS文件中,需要用到时候直接引入,会比较方便.

一、获取非行内样式

function getStyle(ele,attr){
if(ele.currentStyle){
return ele.currentStyle[attr];
}else{
return getComputedStyle(ele,false)[attr];
}
}

【注】:这里arrt作为变量,要使用中括号语法。

二、事件对象的获取

//事件对象的获取兼容
function getEvent(ele){
var e = ele || window.event;
}

三、事件冒泡

//事件冒泡的兼容
function stopBubble(e){
if(e.stopPropagation){
e.stopPropagation();
}else {
e.cancelBubble = true;
}
}

四、阻止浏览器默认行为

//阻止默认事件的兼容
function prevent(eve){
var e = eve || window.event;
if(e.preventDefault){
e.preventDefault();
}else {
e.event.returnValue = false;
}
}

Tip:这里还有一种很简单的写法,在代码的最后一行加上return false;一定要注意的是,这句代码一定在所写事件的最后一行,不然后面的代码都执行不了,用的时候要注意。

五、事件绑定以及事件删除

  1.监听式事件的绑定

//监听式绑定
function addEvent(ele,type,cb){
if(ele.addEventListener){
ele.addEventListener(type,cb);
}else if(ele.attachEvent){
ele.attachEvent("on"+type,cb);
}else {
ele["on" + type] = cb;
}
}

  2.监听式事件的删除

//删除绑定
function romoveEvent(ele,type,cb){
if(ele.removeEventListener){
ele.romoveEventListener(type,cb);
}else if(ele.detachEvent){
ele.detachEvent("on"+type,cb);
}else {
ele["on"+type] = null;
}
}

六、键盘事件

//键盘检测兼容
function KeyC(eve){
var e = eve || window.event;
var keyc = e.keyCode || e.which;
return keyc;
}

JavaScript中几种常见的兼容问题及解决方案的更多相关文章

  1. JavaScript 中 4 种常见的内存泄露陷阱

    了解 JavaScript 的内存泄露和解决方式! 在这篇文章中我们将要探索客户端 JavaScript 代码中常见的一些内存泄漏的情况,并且学习如何使用 Chrome 的开发工具来发现他们.读一读吧 ...

  2. JavaScript中五种常见运算符

    一. in运算符 in运算符希望它的左操作数是一个字符串或可以转换为字符串,希望它的右操作数是一个对象.如果右侧的对象拥有一个名为左操作数值的属性名,那么表达式返回true.例如: var point ...

  3. javascript中五种常见的DOM方法

    getElementById将返回一个与那个有着给定id属性值的元素节点对应的对象. <html xmlns="http://www.w3.org/1999/xhtml"&g ...

  4. JavaScript版几种常见排序算法

    今天发现一篇文章讲“JavaScript版几种常见排序算法”,看着不错,推荐一下原文:http://www.w3cfuns.com/blog-5456021-5404137.html 算法描述: * ...

  5. JS中几种常见的数组算法(前端面试必看)

    JS中几种常见的数组算法 1.将稀疏数组变成不稀疏数组 /** * 稀疏数组 变为 不稀疏数组 * @params array arr 稀疏数组 * @return array 不稀疏的数组 */ f ...

  6. Spring RestTemplate中几种常见的请求方式

    https://github.com/lenve/SimpleSpringCloud/tree/master/RestTemplate在Spring Cloud中服务的发现与消费一文中,当我们从服务消 ...

  7. 自然语言处理的CNN模型中几种常见的池化方法

    自然语言处理的CNN模型中几种常见的池化方法 本文是在[1]的基础上进行的二次归纳. 0x00 池化(pooling)的作用   首先,回顾一下NLP中基本的CNN模型的卷积和池化的大致原理[2].f ...

  8. [js]javascript中4种异步

    javascript中4种异步: 1.ajax 2.定时器 3.事件绑定 4,回调 定时器 //顺序执行 /* var s = 0; for (var i = 0; i < 10000; i++ ...

  9. Spring RestTemplate中几种常见的请求方式GET请求 POST请求 PUT请求 DELETE请求

    Spring RestTemplate中几种常见的请求方式 原文地址: https://blog.csdn.net/u012702547/article/details/77917939   版权声明 ...

随机推荐

  1. nginx文件名逻辑漏洞_CVE-2013-4547漏洞复现

    nginx文件名逻辑漏洞_CVE-2013-4547漏洞复现 一.漏洞描述 这个漏洞其实和代码执行没有太大的关系,主要原因是错误地解析了请求的URL,错误地获取到用户请求的文件名,导致出现权限绕过.代 ...

  2. jsp数据交互(二).2

    1.application对象 application对象类似于系统的“全局变量”,用于同一个服务器内的所有用户之间的数据共享,对于整个Web服务器,application对象有且只有一个实例. (1 ...

  3. 努力做一个优秀的programmer [ C# 影院售票系统]

    Cinema.cs类 [Serializable] // 电影院类 public class Cinema { public Cinema() { //二进制 SoldTickets = new Li ...

  4. 8 NLP-自然语言处理Demo

    1 NLP(自然语言处理) 1.1相似度 相似度和距离之间关系: 1.文本相似度: 1) 语义相似.但字面不相似: 老王的个人简介 铁王人物介绍 2) 字面相似.但是语义不相似: 我吃饱饭了 我吃不饱 ...

  5. 前端js性能优化的要点

    1 尽量少使用全局查找,比如全局变量,如果要多次使用,可以将全局变量存为局部变量再使用 eg:function(){ var body=document.body; alert(body): body ...

  6. angular6组件封装以及发布到npm

    一.创建angular项目 ng new myFirstDemo //angular-cli新建项目ng g m testm //新建模块ng g c testm/headertest //新建组件 ...

  7. 从js 讲解时间复杂度和空间复杂度

    1. 博客背景 今天有同事在检查代码的时候,由于函数写的性能不是很好,被打回去重构了,细思极恐,今天和大家分享一篇用js讲解的时间复杂度和空间复杂度的博客 2. 复杂度的表示方式 之前有看过的,你可能 ...

  8. Java集合系列(四):HashMap、Hashtable、LinkedHashMap、TreeMap的使用方法及区别

    本篇博客主要讲解Map接口的4个实现类HashMap.Hashtable.LinkedHashMap.TreeMap的使用方法以及三者之间的区别. 注意:本文中代码使用的JDK版本为1.8.0_191 ...

  9. alluxio源码解析-netty部分(2)

    netty简介 Netty是 一个异步事件驱动的网络应用程序框架,用于快速开发可维护的高性能协议服务器和客户端.   netty作为alluxio中重要的通讯组件 在常见的客户端上传,下载中,都会有n ...

  10. MySQL高速缓存

    MySQL高速缓存启动方法及参数详解query_cache_size=32M query_cache_type=1,默认配置下,MySQL的该功能是没有启动的,可能你通过show variables ...