js常见兼容性问题以及解决方法
1.关于使用 event对象，出现的兼容性问题
IE/Chrom: event.clientX;event.clientY
FF/IE9以上/Chrom: 传参e e.clientX;e.clientY
获取event对象兼容性写法: var oEvent==e||window.event;
var oBox = document.getElementById("box")
oBox.onclick = function(e){
e=e||window.event;
if(e){
alert(1);
}
}
获取键码值
document.onkeydown=function(e){
e=e||window.event;
var _code=e.keyCode||e.which;
}
//举例说明 完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 30px;
height: 30px;
background: red;
}
</style>
<script type="text/javascript">
window.onload = function(){
function eventButton(){
var oBox = document.getElementById("box");
oBox.onclick = function(e){//鼠标点击事件
e=e||window.event;
console.log(e.button);//输出0 0代表左键
}
oBox.oncontextmenu = function(e){//鼠标右击事件
e=e||window.event;
console.log(e.button);//输出2 2代表左键
e.preventDefault();//阻止默认事件 非IE
e.returnvalue=false;//IE阻止默认事件
//解决兼容
// if(!e.returnvalue){
// e.preventDefault()
// }else{
// e.returnvalue=false;
// }
}
} eventButton()
} </script>
</head>
<body>
<div id="box"></div>
</body>
</html>
阻止冒泡兼容问题解决方法
e = e||window.event;
if(e.stop Propagation){
e.stopPropagation();
}else{
e.cancleBubble=true;
}
2.关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题
var oDiv =document.getElementById('demo')
alert(getComputedStyle(oDiv).height);//不兼容IE8 以下版本
alert(oDiv.currentStyle.height);//兼容IE所有版本,opera
if (oDiv.currentStyle){
alert(oDiv.currentStyle.height)
}else{
alert(getComputedStyle(oDiv).height);
}
举例兼容两个浏览器的写法:
function getStyle(obj,attr){
var arr =attr.match(/\w+/g);
attr = arr.join("");
console.log(attr);
if (obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
oBox.style.height = getStyle(oDiv,"height");
3.关于DOM中 childNodes 获取子节点出现的兼容性问题
childNodes:获取子节点,
--IE6-8:获取的是元素节点,正常
--高版本浏览器:但是会包含文本节点和元素节点(不正常)
解决方法: 使用nodeType:节点的类型，并作出判断
--nodeType=3-->文本节点
--nodeTyPE=1-->元素节点
例: 获取ul里所有的子节点，让所有的子节点背景色变成红色
获取元素子节点兼容的方法:
var oUl=document.getElementById('ul');
for(var i=0;i<oUl.childNodes.length;i++){
if(oUl.childNodes[i].nodeType==1){
oUl.childNodes[i].style.background='red';
}
}
注：上面childNodes为我们带来的困扰完全可以有children属性来代替。
children属性:只获取元素节点,不获取文本节点,兼容所有的浏览器，
比上面的好用所以我们一般获取子节点时,最好用children属性。
var oUl=document.getElementById('ul');
oUl.children.style.background="red";
parentNode不存在兼容问题，通过子元素找父节点
4.关于使用 firstChild,lastChild 等，获取第一个/最后一个元素节点时的兼容
firstChild,lastChild,nextSibling,previousSibling,获取第一个元素节点，不兼容IE低版本
firstElementChild,lastElementChild,nextElementSibling,previousElementSibling 高版本浏览器下
--兼容写法:
oBox.firstChild||oBox.fristElementChild
5.添加监听时间addEventListerner/attachEvent 出现的兼容问题
IE8以下低版本: attachEvent('事件名',fn);
FF,Chrome,IE高版本用: attachEventLister('事件名',fn,false/true);
_oBox.addEventListerner("click",function(){
},true)
_oBox.attachEvent("onclick",function(){
},true)
*封装事件监听 目的：解决兼容问题
function packageEventListerner(_current,_type,_deal,_capture){
//_current当前触发的对象 _type触发事件的类型(click,mouseover..),_deal需要处理的函数 ，_capture是否需要捕获
if(_current.addEventListerner){
_current.addEventListerner_type,_deal,_capture)
}else{
_current.attachEvent(("on"+_type,_capture)
}
}
//会持续更新
}
7.关于获取滚动条距离而出现的问题
Chrome浏览器document.body
FF,Opera和IE浏览器document.documentElement.scrollTop
兼容处理:
window.onscroll=function(){
document.documentElement.scrollTop||document.body.scrollTop
}
//简单举例点击底部回到顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#bot-scroll{ width: 34px;
height: 35px;
margin-left: 1px;
position: fixed;
background-color: #7a6e6e;
right: 10px;
bottom: 10px;
}
body{
height: 5000px;
}
</style>
</head>
<body>
<div id="bot-scroll"></div>
<script type="text/javascript">
var oScroll = document.getElementById('bot-scroll');
window.onscroll =function(){
//底部盒子设置点击事件
oScroll.onclick = function(){
//设置定时器
var timer= setInterval(function(){
var num = document.body.scrollTop - 100;//Chrome
var num2 = document.documentElement.scrollTop - 100;//IE
//谷歌兼容写法代码开始
if(document.body.scrollTop&&num <= 0){
num = 0;
clearInterval(timer);
}//结束
//IE兼容写法代码开始
if(document.documentElement.scrollTop&&num2 <= 0){
num2 = 0;
clearInterval(timer);
}
//结束
document.body.scrollTop = num;
document.documentElement.scrollTop = num2;
},30)
}
} </script>
</body>
</html>
js常见兼容性问题以及解决方法的更多相关文章
- coreseek常见错误原因及解决方法
coreseek常见错误原因及解决方法 Coreseek 中文全文检索引擎 Coreseek 是一款中文全文检索/搜索软件,以GPLv2许可协议开源发布,基于Sphinx研发并独立发布,专攻中文搜索和 ...
- ADB几种常见的错误及解决方法
下面列举出几种常见的错误及解决方法. Q1:无效的安装包,安装包已损坏[INSTALL_FAILED_INVALID_APK] A1:请检查安装包是否完整.如果是xpk包,可以通过 手动安装xpk来检 ...
- JS 无法清除Cookie的解决方法
JS 无法清除Cookie的解决方法 项目中使用sdmenu.js时,需要在登录时清除Cookie,而sdmenu默认是会保存Cookie的 下面是sdmenu.js保存Cookie的方法 doc ...
- JAVA常见中文问题的解决方法(转)
JAVA常见中文问题的解决方法 http://www.java-cn.com/club/article-5876-1.html 以下解决方案是笔者在日常生活中遇到的,希望能对你解决JAVA中文问题有所 ...
- Excel公式的常见错误值及其解决方法
Excel公式的常见错误值及其解决方法 经常用Excel的朋友可能都会遇到一些莫名奇妙的错误值信息:# N/A!.#VALUE!.#DIV/O!等等,出现这些错误的原因有很多种,如果公式不能计算正确结 ...
- JS高程中的垃圾回收机制与常见内存泄露的解决方法
起因是因为想了解闭包的内存泄露机制,然后想起<js高级程序设计>中有关于垃圾回收机制的解析,之前没有很懂,过一年回头再看就懂了,写篇博客与大家分享一下. #内存的生命周期: 分配你所需要的 ...
- 移动端前端笔记 — 遇到的常见JS与CSS问题及解决方法 （ 摘自zdwzdwzdw）
笔者接触移动前端快一年了,特将平时的一些笔记整理出来,希望能够给需要的人一些小小的帮助.同时也由于笔者的水平有限,虽说都是笔者遇到过使用过的,但文中可能也会出现一些问题或不严谨的地方,望各位指出,不胜 ...
- 移动端遇到的常见JS与CSS问题及解决方法
由于笔者的水平有限,虽说都是笔者遇到过使用过的,但文中可能也会出现一些问题或不严谨的地方,望各位指出,不胜感激! 一. css部分 body如果设置height:100%;overflow:hidde ...
- [转]IE和Firefox兼容性问题及解决方法
今天测试代码时,发现不少IE可以运行的ajax,但在FF中报错.IE和Firefox(火狐)在JavaScript方面的不兼容及统一方法总结如下: 1.兼容firefox的 outerHTML,FF中 ...
随机推荐
- CDQZ集训DAY0 日记
貌似没发生什么事…… 按照教练员的交代,写一下流水账…… 早上5:30到了机场,然后就默默地坐着飞机到了成都.然后就按预定好的被GXY的父亲的朋友接机(貌似因为觉得GXY和他爸的同学挺像被批判一番). ...
- 第九章 webase 分布式中间件平台快速部署
鉴于笔者以前各大博客教程都有很多人提问,早期建立一个技术交流群,里面技术体系可能比较杂,想了解相关区块链开发,技术提问,请加QQ群:538327407 参考资料:https://webasedoc.r ...
- Ray聊天记录
由于工作变动,Ray的文档.示例没有及时更新,深表歉意.在Ray升级后,性能较几个月前有了非常大的提升,也更具易用性.这是QQ交流群里大家的聊天记录,跟大家分享一下(由于时间仓促群里大家的聊天记录没有 ...
- STM32F072从零配置工程-实现delay功能
因为是使用SysTick来作为延时时钟,因此在这里给出SysTick时钟的寄存器: CTRL:SysTick控制及状态寄存器 位段 名称 类型 复位值 描述 16 COUNTFLAG R/W 0 如果 ...
- youku_androidid
youku_androidid = 1310; imei screenwidth screenhight
- [springboot] 搭建项目及单元测试
本文纯属记录自己学习的过程以及相关使用操作,使用工具Idea2018. 1.创建项目: -- 目录结构 2.配置文件 3.pom文件 4.创建测试类并启动项目 package com.zr.dem ...
- easypermissions的基本使用
转载请注明出处 http://blog.csdn.net/pyfysf/article/details/78204395 Android 6.0(API 级别 23)开始,在应用运行时向其授予权限,而 ...
- C#3.0新增功能09 LINQ 基础08 支持 LINQ 的 C# 功能
连载目录 [已更新最新开发文章,点击查看详细] 查询表达式 查询表达式使用类似于 SQL 或 XQuery 的声明性语法来查询 IEnumerable 集合. 在编译时,查询语法转换为对 LIN ...
- Flutter学习笔记（11）--文本组件、图标及按钮组件
如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件 文本组件 文本组件(text)负责显示文本和定义显示样式,下表为text常见属性 Text组件属性及描述 属性名 类型 默认 ...
- iframe插入视频自动播放代码
<iframe marginwidth=0 marginheight=0 src='http://www.wsview.com/yzplayerAction!play2.action?autoP ...