浏览器兼容性-JS篇
总结一下平时遇到的浏览器兼容性问题,本篇关于JS。
1.事件绑定
兼容写法:
![](/assets/blank.gif)
1 function add(obj,event){ 2 if (obj.addEventListener) { 3 obj.addEventListener(event,fn,fase); 4 }else{ 5 obj.attachEvent("on"+event,fn); 6 } 7 }
![](/assets/blank.gif)
小结:addEventListener()兼容firefox、chrome、safari、opera、IE9+
attachEvent()兼容IE7,8
2.event事件对象
兼容写法
1 document.onclick = function(e){ 2 var e = e||window.event; 3 console.log(e.clientX); 4 }
小结:e兼容火狐浏览器,window.event兼容非火狐
3.获取scrollTop
兼容写法:
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
小结:document.documentElement.scrollTop兼容非chrome
document.body.scrollTop兼容chrome
4.阻止浏览器默认事件
兼容写法:
![](/assets/blank.gif)
1 function prevent(event){ 2 if (event.preventDefault) { 3 event.preventDefault(); 4 }else{ 5 event.returnValue = false; 6 } 7 }
![](/assets/blank.gif)
小结:eventPreventDefault()不兼容IE6-8
event.returnValue = false;兼容IE
5.阻止冒泡
兼容写法:
![](/assets/blank.gif)
1 function stop(event){ 2 if (event.stopPropagation) { 3 event.stopPropagation(); 4 }else{ 5 event.cancleBubble = true; 6 } 7 }
![](/assets/blank.gif)
小结:event.stopPropagation()不兼容IE6-8
event.cancleBubble = true兼容IE
6.滚轮
兼容写法:
![](/assets/blank.gif)
1 function mouseWheel(obj,fn){ 2 var ff = window.navigator.userAgent.indexOf('Firefox'); 3 if (ff!=-1) { obj.addEventListener('DOMMouseScroll',wheel,false);//兼容火狐 4 }else{ 5 obj.onmousewheel = wheel;//非火狐 6 } 7 }
![](/assets/blank.gif)
小结:obj.addEventListener('DOMMouseScroll',wheel,false);//兼容火狐
obj.onmousewheel = wheel;//非火狐
7.获取classname
兼容写法:
![](/assets/blank.gif)
1 function byClass(parent,className){2 //通过className查找元素的兼容问题3 //如果现代浏览器有这个写法4 if (parent.getElementsByClassName) {5 return parent.getElementsByClassName(className);//返回直接查找到的元素集6 }else{7 //IE浏览器8 var arr = [];//用于存储最终查找到的元素9 var els = parent.getElementsByTagName('*');//获取查找范围下的所有元素 10 var reg = new RegExp('\\b'+className+'\\b',g); 11 for (var i=0;i<els.length;i++) { 12 if (reg.test(els.className)) {//判断els.className与reg是否匹配,若匹配返回true 13 arr.push(els[i]); 14 } 15 } 16 return arr;//返回查找到的元素 17 } 18 }
转载于:https://www.cnblogs.com/zhengxingpeng/p/6682562.html
浏览器兼容性-JS篇相关推荐
- 浏览器兼容性JS问题
今天整理了一下浏览器对JS的兼容问题,希望能给你们带来帮助,我没想到的地方请留言给我,我再加上: 常遇到的关于浏览器的宽高问题: //以下均可console.log()实验 var winW= ...
- JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 参考文章: (1)JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 (2) ...
- 【转】常见浏览器兼容性问题与解决方案css篇
小满语:说到兼容性问题,不得不说一下IE浏览器,尤其是IE9以前,兼容性差的要哭,来,擦擦眼泪,学习一下兼容性问题的解决方案~本篇主要是布局后加样式后导致浏览器显示不统一的情形: 所谓的浏览器兼容性问 ...
- 移动常见问题--H5标签之浏览器兼容性、JS之浏览器兼容性、CSS3之浏览器兼容性、移动端动画、click300ms延迟、单行和多行文字溢出省略、水平居中和垂直居中
1. H5标签之浏览器兼容性 在移动端时可以放心的使用h5相关的标签 但是如果需要兼容一些低版本的浏览器,例如IE6/7/8,此时可以到 [兼容] 下载一个 html5shiv.min.js 文件 ...
- 浏览器兼容性篇-vue篇-ES6转ES5
在 vue 项目中,ie浏览器识别ES5写法的javascript代码,而IE浏览器不支持,所以需要借助插件 babel-polyfill ,解决方案如下: vue-cli2下 解决浏览器兼容性问题 ...
- 浏览器兼容性(手机、电脑。js、html、css)
浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大. 碰到频率:100% 解决方案:CSS里 *{ ...
- html 引入js 兼容,JS跨浏览器兼容性解决思路及方案汇总,常见JS兼容性知识点汇总...
上篇文章我们介绍了,处理CSS浏览器兼容性的4个解决方案:浏览器CSS样式初始化.浏览器私有属性,CSS hack语法和自动化插件,有兴趣的可以看看,链接放到本文结尾 本文主要介绍JS的跨浏览器兼容性 ...
- 常见的浏览器兼容性问题与解决方案——CSS篇
1.不同的浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin和padding差异较大. 碰到频率:100% 解决方案:初始化CSS的默认样式,*{ ...
- html手机和电脑一致,浏览器兼容性(手机、电脑。js、html、css)
浏览器兼容性问题 浏览器兼容性问题又被称为网页兼容性或网站兼容性问题,指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题 浏览器兼容的重要性: 网站做好了浏览器兼容,能够让网站在不 ...
- 介绍几款浏览器兼容性测试工具
昨天和朋友聊到了有关浏览器兼容性的问题,在开发中有时的确很让人苦恼,我向他推荐了几款测试浏览器兼容的工具,分享给大伙,有什么更好的工具或是解决方法还希望大家拿出来晒一晒. IETester 这是我最先 ...
最新文章
- html5的video元素学习手札
- 防止重复提交保证幂等的几种解决方案
- 数据库乐观锁如何实现幂等性?
- [Windows] Windows 8.1 取消在任务栏显示应用商店的应用
- srv.sys蓝屏解决补丁_Win10 补丁 KB4556799 导致部分用户蓝屏死机和网络问题
- C++ 普通函数与函数模板 区别以及调用规则01
- 电子计算机哪几部分组成的,电子计算机由哪几部分构成?
- FD.io VPP:用户文档:VPP RPM包的构建与离线安装
- 自动选择SVG和VML的WEB页面
- 僵尸存在......在.NET中?
- 有时间依存效应或时间依存风险因素的生存分析
- [Erlang 0026] 目前最优的Erlang IDE
- python alembic which comes from SQLalchemy
- 数学建模国奖论文2019-C-C308分析
- 面包屑导航条实现三级分类查询
- 在线文档转换接口 word,excel,ppt等在线文件转pdf、png
- Lotka–Volterra equation Competitive Lotka–Volterra equations
- 【前端——Node.js】:身份认证
- 网易互娱在线编程纪要
- VF2, VF3算法
热门文章
- C++ multimap 用法总结 例子
- latex table 表格中 文字对齐
- 【Django 2021年最新版教程4】为项目添加资源文件(css,js,image)
- 基于springboot的民办职业学校缴费系统
- c语言 链接器 原理,新手向的链接器知识普及/////就是这样的说
- java jpa 字段 关联_jpa查询关联表懒加载数据initialize proxy no session
- java实现复原IP地址_LeetCode 力扣 93. 复原IP地址
- Android将库导入到build.gradle
- 我喜欢用计算机400字,我喜欢电脑画画作文400字
- asp 环境配置到mysql数据库增删改查