JS中兼容问题的汇总
时间:2019-09-07
本文章向大家介绍JS中兼容问题的汇总,主要包括JS中兼容问题的汇总使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
获取非行内样式的兼容方式
function getStyle(obj,attr){ //获取非行间样式,obj是对象,attr是值 if(obj.currentStyle){ //针对ie获取非行间样式 return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; //针对非ie } }
获取事件对象的兼容方式
document.onclick=function(eve){ var e=eve||window.event; console.log(e); }
事件冒泡的兼容方法
function stopBubble(e){ if(e.stopPropagation){ e.stopPropagation(); }else{ e.cancelBubble = true;//兼容ie } }
阻止浏览器默认行为的兼容方法
if( e.preventDefault ){ e.preventDefault(); }else{ window.event.returnValue = false;//ie }
监听事件的设置和移除的兼容方式
1.封装成对象的方式 var EventUtil={ addHandler:function(DOM,EventType,fn){ if(DOM.addEventListener){ DOM.addEventListener(EventType,fn,false); }else if(DOM.attachEvent){ DOM.attachEvent('on'+EventType,fn) }else{ DOM['on'+EventType]=fn } }, removeHandler:function(DOM,EventType,fn){ if(DOM.removeEventListener){ DOM.removeEventListener(EventType,fn,false) }else if(DOM.detachEvent){ DOM.detachEvent('on'+EventType,fn) }else{ DOM['on'+EventType]=null; } } } 2.封装成两个函数的方式 function addEvent(obj,inci,back){ if(obj.addEventListener){ obj.addEventListener(inci,back); }else if(obj.attachEvent){ obj.attachEvent("on" + inci,back); }else{ obj["on"+inci] = back; } } function removeEvent(obj,inci,back){ if(obj.removeEventListener){ obj.removeEventListener(inci,back,false); }else if(obj.detachEvent){ obj.detachEvent("on" + inci,back); }else{ obj["on"+inci] = null; } }
事件委托的兼容方法
var oul = document.querySelector("ul") oul.onclick = function(eve){ var e = eve || window.event; var t = e.target || e.srcElement; if(t.getAttribute("abc") == "l"){ console.log(e.target.innerHTML) } }
键盘事件的兼容方法
var eve = eve||window.event; var keyC = eve.keyCode||eve.which;
以上是本人在学习js过程中遇见的几个兼容方式的汇总,如果哪里有错误希望大家指出,谢谢。
原文地址:https://www.cnblogs.com/lxylhj/p/11479827.html
- .net字符串数组查找方式效率比较
- 使用Ring Buffer构建高性能的文件写入程序
- 一行代码调用实现带字段选取+条件判断+排序+分页功能的增强ORM框架
- PDF.NET数据开发框架实体类操作实例
- 利用Burp Suite对OWASP Juice Shop进行渗透测试
- Java同步问题面试知识学习
- Android UI控件系列:LinearLayout(线性布局)
- 使用操作符重载,生成ORM实体类的SQL条件语句
- Dance In Heap(四):一些堆利用的方法(下)
- Mac系统的Proton恶意软件:卷!土!重!来!
- Erlang语言学习入门
- Android使用Ant进行apk多渠道打包
- Dance In Heap(三):一些堆利用的方法(中)
- Android性能优化篇:使用软引用和弱引用
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PL/SQL 数据库连接工具的下载、安装与使用实例演示
- JavaScript 技术篇-JSON字符串在线快速格式化查看实例演示,json.cn网址格式化json字符串
- Python 技术篇-含中文编码的代码运行方法,(unicode error) ‘utf-8‘ codec can‘t decode问题原因及解决方法
- Spring Boot Actuators
- 用图机器学习探索 A 股个股相关性变化
- Python 技术篇-连接oracle数据库并执行sql语句实例演示,python连接oracle数据库oci详细配置方法
- MySQL 技术篇-mysql数据库的安装、配置与使用实例演示
- JavaScript 技术篇-js代码获取当前操作系统信息、浏览器版本信息实例演示,windows NT版本对照表
- Oracle 数据库impdp导入数据库版本和dmp数据库文件版本不匹配问题解决方法,ORA-39142版本号不兼容、ORA-39000转储文件说明错误解决方法
- 实践总结:基于Kbone使用React同构开发小程序
- BAT 批处理命令 - 实现输出当前文件夹下的所有文件夹名的功能实例演示
- Python+Selenium 自动化-指定chrome驱动运行selenium实例演示,运行指定位置下的浏览器驱动
- Linux 命令查找指定文件夹下符合查询条件的文件和文件夹实例演示
- 用Python实现一个最新QQ办公版(TIM)的登录界面
- Oracle 数据库直接执行本地sql文件、sql脚本实例演示