原生js的兼容问题总结
获取元素的非行间样式
function getStyle(obj, name) { //获取元素的非行间样式
if (obj.currentStyle) {
return obj.currentStyle[name]; //ie
} else {
return getComputedStyle(obj, false)[name]; //ff chrome
}
}
绑定事件
这种方式添加事件IE6/7/8只支持window.event不支持参数传入, Firefox只支持参数传入不支持其它方式。 IE9/Opera/Safari/Chrome 两种方式都支持。
function myAddEvent(obj, ev, fn) { //绑定事件的兼容写法
if (obj.attachEvent) {
obj.attachEvent('on' + ev, fn); //ie
} else {
obj.addEventListener(ev, fn, false); //firefox chrome
}
}
移除事件
function removeEvent(obj, ev, fn) { //移除事件的兼容写法
if (obj.detachEvent) {
obj.detachEvent('on' + ev, fn); //ie
} else {
removeEventListener(ev, fn, false); //firefox chrome
}
}
阻止事件冒泡
function stopPropagation(e) { //阻止事件冒泡
e = e || window.event;
if (window.event) {
e.cancelBubble = true; //ie
} else {
e.stopPropagation(); //firefox
}
}
事件源
oUl.onmouseout = function(ev) {
var ev = ev || window.event; // 标准浏览器用ev,ie9以下用window.event
var target = ev.target || ev.srcElement; //标准浏览器用ev.target ie浏览器用ev.srcElement
if (target.nodeName.toLowerCase() == "li") {
target.style.background = "";
}
}
阻止浏览器默认行为
function stopDefault(e) {
if (e && e.preventDefault) e.preventDefault(); //阻止默认浏览器动作(W3C)
else window.event.returnValue = false; //IE中阻止函数器默认动作的方式
return false;
}
原生js的兼容问题总结的更多相关文章
- 原生JS编写兼容IE6,7,8浏览器无缝自动轮播(带按钮切换)
项目要求页面兼容IE6,7,8等浏览器,我们可能会遇到这个轮播效果,轮播板块要求:无限循环.自动轮播和手动切换功能,每一次滚动一小格,网上有很多这类插件,例如:swiper等! 但是很多都是不兼容IE ...
- 前端开发必备组件库【基于原生js、兼容主流浏览器、B/S必备】
[持续更新中...跪求点击右上角星星,好人一生平安!] API详见github,链接如下: https://github.com/pomelott/pomelo-plug-in
- 基于原生js的返回顶部组件,兼容主流浏览器
基于原生js的返回顶部插件,兼容IE8及以上.FF.chrome等主流浏览器. js文件中封装了getScrollTop()和changeScrollTop()函数分别用于获取滚动条滚动的高度和修改滚 ...
- 原生JS forEach()和map()遍历的区别以及兼容写法
一.原生JS forEach()和map()遍历 共同点: 1.都是循环遍历数组中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前 ...
- 原生js实现ajax跨域(兼容IE8,IE9)
html设置meta标签兼容360兼容模式和IE怪异模式 <meta http-equiv="X-UA-Compatible" content="IE=9;IE=8 ...
- 用原生JS实现多张图片上传及预览功能(兼容IE8)
最近需要做一个图片上传预览的功能(兼容IE8-11.chrome.firefox等浏览器),网上现有的文件上传组件(如webuploader)总是会遇到一些兼容性问题.于是我参考了一些博文(链接找不到 ...
- 用原生JS写一个网页版的2048小游戏(兼容移动端)
这个游戏JS部分全都是用原生JS代码写的,加有少量的CSS3动画,并简单的兼容了一下移动端. 先看一下在线的demo:https://yuan-yiming.github.io/2048-online ...
- 兼容各版本浏览器,封装原生Js获取ClassName
web前端开发工作中常常会用到获取元素的className,用jQuery的$(".class")方法也可以获取className,但是有时候牵扯到数据而影响的加载顺序的原因会获取 ...
- 黄聪:原生js的音频播放器,兼容pc端和移动端(原创)
更新时间:2018/9/3 下午1:32:54 更新说明:添加音乐的loop设置和ended事件监听 loop为ture的时候不执行ended事件 1 2 3 4 5 6 7 8 9 10 11 12 ...
随机推荐
- CentOS搭建VSFTP
1.先看看有没有安装 rpm -qa | grep vsftpd 如果没有提示,说明没有安装.接下来,我们安装一个ftp. 2.yum安装vsftpd: yum -y install vsftpd 安 ...
- HDU 4452 Running Rabbits (模拟题)
题意: 有两只兔子,一只在左上角,一只在右上角,两只兔子有自己的移动速度(每小时),和初始移动方向. 现在有3种可能让他们转向:撞墙:移动过程中撞墙,掉头走未完成的路. 相碰: 两只兔子在K点整(即处 ...
- http 2.0
http2.0 待学习整理 http://www.zhihu.com/question/34074946
- iOS开发中懒加载的使用和限制
1.在开发过程中很多时候,很多控件和对象需要alloc为了,提高开发效率使得懒加载得以产生. 2.下边用代码解释: - (NSMutableArray *)newsArr{ if (!_newsArr ...
- java中用线程解决进出水问题
//进水 class Inflow implements Runnable{ //水对象 Water wat; public Inflow(Water w){ this.wat = w; } @Ove ...
- 使用startCoroutine制定倒计时
使用startCoroutine制定倒计时 using UnityEngine; using System.Collections; public class TimerCoroutine : Mon ...
- log4j.properties文件配置--官方文档
Default Initialization Procedure The log4j library does not make any assumptions about its environme ...
- PPTP、L2TP、IPSec和SSLVPN的区别
VPN (虚拟专用网)发展至今已经不在是一个单纯的经过加密的访问隧道了,它已经融合了访问控制.传输管理.加密.路由选择.可用性管理等多种功能,并在全球的信息安全体系中发挥着重要的作用.也在网络上,有关 ...
- Spring MVC 3.0.5+Spring 3.0.5+MyBatis3.0.4全注解实例详解(一)
Spring更新到3.0之后,其MVC框架加入了一个非常不错的东西——那就是REST.它的开放式特性,与Spring的无缝集成,以及Spring框架的优秀表现,使得现在很多公司将其作为新的系统开发框架 ...
- Web Services之SOAP学习
Web Services之SOAP [toc] 什么是SOAP SOAP(Simple Object Access Protocol)简单对象访问协议是在分散或分布式的环境中交换信息的简单的协议,是一 ...