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
}
监听事件的设置和移除的兼容方式
.封装成对象的方式
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;
}
}
} .封装成两个函数的方式
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过程中遇见的几个兼容方式的汇总,如果哪里有错误希望大家指出,谢谢。
JS中兼容问题的汇总的更多相关文章
- js中的DOM操作汇总
一.DOM创建 DOM节点(Node)通常对应于一个标签,一个文本,或者一个HTML属性.DOM节点有一个nodeType属性用来表示当前元素的类型,它是一个整数: Element,元素 Attrib ...
- js中typeof的用法汇总[转载]
http://www.jb51.net/article/43187.htm JavaScript中的typeof其实非常复杂,它可以用来做很多事情,但同时也有很多怪异的表现.本文列举出了它的多个用法, ...
- js中typeof的用法汇总
- JS中常遇到的浏览器兼容问题和解决方法
今天整理了一下浏览器对JS的兼容问题,希望能给你们带来帮助,我没想到的地方请留言给我,我再加上: 常遇到的关于浏览器的宽高问题: //以下均可console.log()实验 var winW=docu ...
- js中getBoundingClientRect的作用及兼容方案
js中getBoundingClientRect的作用及兼容方案 1.getBoundingClientRect的作用 getBoundingClientRect用于获取某个html元素相对于视窗的位 ...
- JS中常遇到的浏览器兼容问题和解决方法【转】
今天整理了一下浏览器对JS的兼容问题,希望能给你们带来帮助,我没想到的地方请留言给我,我再加上: 常遇到的关于浏览器的宽高问题: //以下均可console.log()实验 var winW=docu ...
- 分享一个自定义的 console 类,让你不再纠结JS中的调试代码的兼容
问题的产生 在写JS的过程中,为了调试我们常常会写很多 console.log.console.info.console.group.console.warn.console.error代码来查看JS ...
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- js中的总结汇总(以后的都收集到这篇)
点1:js中的比较字符串是否相等,js中是用"=="这个来判断是否相等,这点跟java中不一样,java中是.equals()这种方法. 在之前写的ajax的demo中,因为用了. ...
随机推荐
- CDMA原理
CDMA原理——特点 CDMA具有抗多径干扰.抗窄带干扰.抗认为干扰.抗多径延迟扩展的能力.同时有提高蜂窝系统的通信容量和便于模拟与数字体制的共存与过渡等优点.与TDMA技术形成强劲的竞争力. 与FD ...
- 颜色空间模型 与 Opencv中的HSV模型范围
颜色空间总结 RGB.HSV.YUV 什么是颜色 Wiki是这样说的:颜色或色彩是通过眼.脑和我们的生活经验所产生的一种对光的视觉效应.嗯,简单点说,颜色就是人对光的一种感觉,由大脑产生的一种感觉.感 ...
- Qmake: Q_OBJECT
QMake 为Qt的预编译,例:当在代码中使用 Q_OBJECT 宏,需要执行QMake操作,否则编译通不过.
- #1114-JSP指令
JSP 指令 JSP指令用来设置整个JSP页面相关的属性,如网页的编码方式和脚本语言. 语法格式如下: <%@ directive attribute = "value"%& ...
- 使用html5中required属性
直接上代码 <form action="${pageContext.request.contextPath}/login/main.do" method="post ...
- 前端每日实战:138# 视频演示如何用纯 CSS 创作一张 iPhone 价格信息图
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OorLGZ 可交互视频 此视频是可 ...
- leetcode-mid-array-3 Longest Substring Without Repeating Characters
mycode 99.21% class Solution(object): def lengthOfLongestSubstring(self, s): """ :ty ...
- 第三方框架:EventBus
1 研发背景 案例:我们在主页点收藏按钮,未登录状态,跳登录界面,在登录界面跳注册页面,注册成功,关闭注册页面,关闭登录页面,回到主页,刷新item列表和登录状态. 我们一般会用到发送广播和接收广播来 ...
- Vue知识整理4:v-html标签
可以在数据绑定中使用html标签,这样在变量里可以使用html标签输出结果,如下所示:
- 我常用的前端开发工具—cutterman,mark man,sublime text,yeoman,gulp……
虽然才刚刚开始练习切图,不过之前还是接触到不少工具的,决定一一用上,果然用了一天就切完了一个psd,对于一个菜鸟来说,还是很开心的. 我先从学ui网下载了一个psd.切图肯定是要用的ps的啦,这里和大 ...