浏览器兼容问题

时间  2019-11-10
标签 浏览器 兼容 问题 栏目 浏览器 繁體版
原文   原文链接

1、什么是浏览器兼容问题

所谓的浏览器兼容性问题，是指由于不一样的浏览器对同一段代码有不一样的解析，形成页面显示效果不统一的状况。在大多数状况下，咱们的需求是，不管用户用什么浏览器来查看咱们的网站或者登录咱们的系统，都应该是统一的显示效果。因此浏览器的兼容性问题是咱们web前端开发人员常常会碰到和必需要解决的问题.javascript

归纳的来讲，浏览器兼容指的是同一份代码在不一样的浏览器显示效果是不一样的。
浏览器的兼容性大致分为样式兼容性（css），交互兼容性（javascript），浏览器 hack 三个方面。css

一些概念：html

CSS Bug

Css样式在各浏览器中解析不一致的状况，或者说Css样式在浏览器中不能正确显示的问题称为CSS Bug前端

CSS hack

CSS中，hack是指一种兼容css在不一样浏览器中正确显示的技巧方法，由于他们都属于我的对css代码的非官方的修改，或非官方的补丁。有些人更喜欢使用patch（补丁）来描述这种行为。html5

Filter

它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲，filter是一种用来过滤不一样浏览器的hack类型。java

那么，node

  • 不一样的缘由是什么？(不支持的属性? bug？)
  • 如何让它展现正常?(条件注释？ 单独Hack？)

首先，让咱们简单了解一下，三种兼容性的不一样：jquery

样式兼容性（css方面）

clipboard.png

1.由于历史缘由，不一样的浏览器样式存在差别，能够经过 Normalize.css 抹平差别，也能够定制本身的 reset.css，例如经过通配符选择器，全局重置样式android

{ margin: 0; padding: 0; }

2.在CSS3尚未成为真正的标准时，浏览器厂商就开始支持这些属性的使用了。CSS3样式语法还存在波动时，浏览器厂商提供了针对浏览器的前缀，直到如今仍是有部分的属性须要加上浏览器前缀。在开发过程当中咱们通常经过IDE开发插件、css 预处理器以及前端自动化构建工程帮咱们处理。ios

浏览器内核与前缀的对应关系以下

内核 主要表明的浏览器 前缀
Trident IE浏览器 -ms
Gecko Firefox -moz
Presto Opera -o
Webkit Chrome和Safari -webkit

3.在还原设计稿的时候咱们经常会须要用到透明属性，因此解决 IE9 如下浏览器不能使用 opacit。

opacity: 0.5;
 filter: alpha(opacity = 50); //IE6-IE8咱们习惯使用filter滤镜属性来进行实现
 filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50); //IE4-IE9都支持滤镜写法progid:DXImageTransform.Microsoft.Alpha(Opacity=xx)

交互兼容性（javascript）

clipboard.png

1.事件兼容的问题，咱们一般须要会封装一个适配器的方法，过滤事件句柄绑定、移除、冒泡阻止以及默认事件行为处理

var  helper = {}

 //绑定事件
 helper.on = function(target, type, handler) {
     if(target.addEventListener) {
         target.addEventListener(type, handler, false);
     } else {
         target.attachEvent("on" + type,
             function(event) {
                 return handler.call(target, event);
             }, false);
     }
 };

 //取消事件监听
 helper.remove = function(target, type, handler) {
     if(target.removeEventListener) {
         target.removeEventListener(type, handler);
     } else {
         target.detachEvent("on" + type,
         function(event) {
             return handler.call(target, event);
         }, true);
     }
 };

2.new Date()构造函数使用，'2018-07-05'是没法被各个浏览器中，使用new Date(str)来正确生成日期对象的。 正确的用法是'2018/07/05'.

3.获取 scrollTop 经过 document.documentElement.scrollTop 兼容非chrome浏览器

var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

浏览器 hack

clipboard.png

解决浏览器兼容的主要方法是css hack 那么到底什么是css hack呢？

因为不一样厂商的流览器或某浏览器的不一样版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不同，致使在不一样浏览器的环境中呈现出不一致的页面展示效果。这时，咱们为了得到统一的页面效果，就须要针对不一样的浏览器或不一样版本写特定的CSS样式，咱们把这个针对不一样的浏览器/不一样版本写相应的CSS code的过程，叫作CSS hack!

1.快速判断 IE 浏览器版本

<!--[if IE 8]> ie8 <![endif]-->
 
 <!--[if IE 9]> 骚气的 ie9 浏览器 <![endif]-->

2.判断是不是 Safari 浏览器

/* Safari */
 var isSafari = /a/.__proto__=='//';

3.判断是不是 Chrome 浏览器

/* Chrome */
 var isChrome = Boolean(window.chrome);

2、为何会有浏览器兼容问题

  • 同一产品，版本越老， bug 越多
  • 同一产品，版本越新，功能越多
  • 不一样产品，不一样标准，不一样实现方式

3、处理兼容的时候要考虑

  • 浏览器市场份额
  • 常查CSS属性是否兼容时
  • 常查 Hack 的写法

4、处理兼容问题的思路

一、要不要作产品的角度（产品的受众、受众的浏览器比例、效果优先仍是基本功能优先）成本的角度 (有无必要作某件事)

二、作到什么程度让哪些浏览器支持哪些效果

三、如何作根据兼容需求选择技术框架/库(jquery的版本)根据兼容需求选择兼容工具（htmlshiv.js、respond.js、css reset、normalize.css、modernizr）postcss

四、渐进加强和优雅降级渐进加强(progressive enhancement):
针对低版本浏览器进行构建页面，保证最基本的功能，而后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验优雅降级 (graceful degradation): 一开始就构建完整的功能，而后再针对低版本浏览器进行兼容。

5、处理兼容问题的手段

一、合适的框架Bootstrap (>=ie8)；jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)；Vue (>= ie9)...

二、条件注释

即IE条件注释是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。条件注释 (conditional comment) 是于 HTML 源码中被IE有条件解释的语句。条件注释可被用来向 IE 提供及隐藏代码。条件注释最初于微软的 Internet Explorer 5 浏览器中出现，而且直至 Internet Explorer 9 均支持。微软已宣布于 IE10 中止支持。

<!--[if IE 6]>
    <p>You are using Internet Explorer 6.</p>
    <![endif]-->

    <!--[if !IE]><!-->
    <script>alert(1);</script>
    <!--<![endif]-->

if（若是是）非IE浏览器，else（那么）个人页面上该 <script>alert(1);</script>标签会生效，
弹出一个1；若是在IE浏览器上，这段自己是有效的，即能控制该效果，因此在其余浏览器这段则会被注释掉。

<!--[if IE 8]>
    <link href="ie8only.css" rel="stylesheet">
    <![endif]-->

*三、CSS hack
（1）定义：因为不一样厂商的浏览器，好比Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不一样版本，如IE6和IE7，对CSS的解析认识不彻底同样，所以会致使生成的页面效果不同，得不到咱们所须要的页面效果。

这个时候咱们就须要针对不一样的浏览器去写不一样的CSS，让它能在不一样的浏览器中也能获得咱们想要的页面效果。

（2）常见hack写法利用该方法去检测浏览器兼容问题

.box{
  color: red;
  _color: blue; /*针对后期检查将ie6和其余浏览器区别开来的标准*/
  *color: pink; /*同上，ie六、7*/
  color: yellow\9;  /*ie/edge 6-8*/
}

以上属性均是采用样式覆盖形式，去相应地在所在浏览器属性生效

<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->

（3）常见兼容处理范例

例子A：

.target{
  display: inline-block;
  *display: inline;/*在IE六、7中会生效，产生相似bfc的效果，可添加宽高，
与其余浏览器所使用的display: inline-block;有相同效果*/
  *zoom: 1;
}

例子B：

.clearfix:after{
  content: '';
  display: block;
  clear: both;
}
.clearfix{
  *zoom: 1; /* 仅对ie67有效 */
}

例子C：

.clearfix:after{
  content: '';
  display: block;
  clear: both;
}
.clearfix{
  *zoom: 1; /* 仅对ie67有效 */
}

例子D：

<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

例子E：

<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html dir="ltr" lang="en-US"class="no-js iem7"> <![endif]-->
<!--[if IE 7 ]>       <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <![endif]-->]-->
<!--[if IE 7 ]>       <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <![endif]-->
<!--[if IE 8 ]>       <html dir="ltr" lang="en-US" class="no-js ie8 oldie"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->

（4）常见属性的兼容状况：多使用 https://caniuse.com/

  • inline-block: >=ie8
  • inline-block: >=ie8
  • inline-block: >=ie8
  • inline-block: >=ie8
  • inline-block: >=ie8
  • inline-block: >=ie8
  • 圆角: >= ie9
  • 圆角: >= ie9
  • 圆角: >= ie9

6、常见的浏览器兼容性问题以及解决办法

常见的浏览器兼容性可分为三类：

  • HTML兼容
  • CSS兼容
  • JavaScript兼容

（一）H5移动端ios/Android兼容性

viewport

<meta charset="utf-8">
<!--主要I是强制让文档的宽度与设备宽度保持1:1，最大宽度1.0，禁止屏幕缩放。-->
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<!--这个也是iphone私有标签，容许全屏浏览。-->
<meta content="yes" name="apple-mobile-web-app-capable">
<!--iphone的私有标签，iphone顶端状态条的样式。-->
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<!--禁止数字自动识别为电话号码，这个比较有用，由于一串数字在iphone上会显示成蓝色，样式加成别的颜色也是不生效的。-->
<meta content="telephone=no" name="format-detection">
<!--禁止email识别-->
<meta content="email=no" name="format-detection">

禁止复制、选中文本

.el {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
   user-select: none;
}

给不一样屏幕大小的手机设置特殊样式

@media only screen  and (min-device-width : 320px)  and (max-device-width : 375px){}

IOS中input键盘事件keyup、keydown、keypress支持不是很好, 用input监听键盘keyup事件，在安卓手机浏览器中是能够的，可是在ios手机浏览器中用输入法输入以后，并未马上相应keyup事件，只有在经过删除以后才能够响应

方法：能够用html5的oninput事件去代替keyup

<input type="text" id="testInput">
<script type="text/javascript">
  document.getElementById('input').addEventListener('input', function(e){
    var value = e.target.value;
  });
</script>

ios 设置input 按钮样式会被默认样式覆盖

input,textarea {
  border: 0;
  -webkit-appearance: none;
}

消除 IE10 里面的那个叉号

input:-ms-clear{display:none;}

手机上的flex布局时会有兼容性问题，只用新版本的会出现安卓手机不识别的现象

flex布局对于低版本的安卓，不支持flex-wrap:wrap属性，可是ios系统支持换行属性，这个时候如何解决呢？固然是不使用换行，用其余方式代替。

.box{
    display: -webkit-box; 
    /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box; /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox; /* 混合版本语法: IE 10 */
    display: -webkit-flex; /* 新版本语法: Chrome 21+ */
    display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
}

input 的placeholder属性会使文本位置偏上

line-height: （和input框的高度同样高）---pc端解决方法
line-height：normal ---移动端解决方法

input type=number以后，pc端出现上下箭头

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}

实现android和ios系统手机打开相机并可选择相册功能

$(function () {
    //获取浏览器的userAgent,并转化为小写
    var ua = navigator.userAgent.toLowerCase();
    //判断是不是苹果手机，是则是true
    var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
    if (isIos) {
        $("input:file").removeAttr("capture");
    };
})

移动端 HTML5 audio autoplay 失效问题

这个不是 BUG，因为自动播放网页中的音频或视频，会给用户带来一些困扰或者没必要要的流量消耗，因此苹果系统和安卓系统一般都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才能够播放。
解决方法思路：先经过用户 touchstart 触碰，触发播放并暂停（音频开始加载，后面用 JS 再操做就没问题了）。

document.addEventListener('touchstart',function() {
  document.getElementsByTagName('audio')[0].play();
  document.getElementsByTagName('audio')[0].pause();
});

移动端 video在部分android机播放以后浮在最上层，设置z-index无效

这个目前没有好的办法解决
情景一：页面有视频，点击页面按钮显示弹出层（好比让用户输入用户信息），这时候视频会出如今弹出层上面，是否是很-d疼？
方案：点击按钮时候把video隐藏hide，关闭弹出层show，过程当中视频声音还在
情景二：页面很长，往下翻滚时，视频在播放，脱离文档流
方案：页面滚动到某一合适位置把video隐藏hide，回滚到某一位置show，过程当中视频声音还在

关于 iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格

this.value = this.value.replace(/\u2006/g,'');

关于 iOS 与 OS X 端字体的优化(横竖屏会出现字体加粗不一致等)

iOS 浏览器横屏时会重置字体大小，设置 text-size-adjust 为 none 能够解决 iOS 上的问题，但桌面版 Safari 的字体缩放功能会失效，所以最佳方案是将 text-size-adjust 为 100% 。

-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
text-size-adjust:100%;

移动端点击300ms延迟

缘由：浏览器兴起初期，为了判断用户是双击仍是单击，就设置了一个时间段300ms，用户单击后300ms后作事件处理，若是在300ms内连续点击，就判断为双击，作双击处理事件。
因此如今用click绑定事件呢，就会有300ms延迟的问题。
300ms尚可接受，不过由于300ms产生的问题，咱们必需要解决。300ms致使用户体验并非很好，解决这个问题，咱们通常在移动端用tap事件来取代click事件。
推荐两个js，一个是fastclick，一个是tap.js

（二）HTML兼容

解决 ie9 如下浏览器对 html5 新增标签不识别的问题
html5shiv.js
<!--[if lt IE 9]>
<script type="text/javascript" src="https://cdn.bootcss.com/html5...;></script>
<![endif]-->

解决 ie9 如下浏览器不支持 CSS3 Media Query 的问题。
respond.js
<script src="https://cdn.bootcss.com/respo...;></script>

picturefill.js
解决 IE 9 10 11 等浏览器不支持 <picture> 标签的问题
<script src="https://cdn.bootcss.com/pictu...;></script>

高版本的浏览器用了低版本的浏览器没法识别的元素，从而致使不能解析。这点主要体如今html5的新标签上

htmlshim框架可让低于IE9的浏览器支持html5

img的alt属性，在图片不存在的状况下，各浏览器的解析不一致

在chrome下显示的是一张破损的图片，在ff下显示的是alt的文字，而在IE中显示的是破损的图片加文字

ul标签内外边距问题

ul标签在IE6IE7中，有个默认的外边距，可是在IE8以上及其余浏览器中有个默认的内边距

<div id="test">
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    </div>

IE的打印结果，有3个子节点，而且都为P元素；非IE则表现出极大的差别：竟然打印出了7个子节点，固然也包括3个P元素子节点在内，除此以外还多了4个nodeType=3的子节点
改写为：

<div id="test"><p>文字</p><p>文字</p><p>文字</p></div>

（三）IE6常见CSS解析Bug及hack

一、图片间隙

A)div中的图片间隙(该bug出如今IE6及更低版本中)
描述：在div中插入图片时，图片会将div下方撑大三像素。
hack1:将<div>与<img>写在一行上；
hack2:将<img>转为块状元素，给<img>添加声明：display:block;

B)dt,li中图片间隙（IE6）
hack:添加声明：display:block;
overflow:hidden;

二、 默认高度（IE6）

描述：在IE6及如下版本中，部分块元素拥有默认高度（低于18px~22px高度）
hack1:给元素添加声明：font-size:0;
hack2：给元素添加声明：overflow:hidden;

三、双倍浮向（双倍边距）
描述：当Ie6及更低版本浏览器在解析浮动元素时，会错误地把浮向边边界加倍显示。
hack:给浮动元素添加声明：display:inline;

4 、 百分比bug
描述：在IE6及如下版本中在解析百分比时，会按四舍五入方式计算从而致使50%加50%大于100%的状况。
hack:给右面的浮动元素添加声明：clear:right; 意思：清除右浮动。
clear 清除浮动
clear:left;清除左浮动
clear:right;清除右浮动
clear:both 清除两边浮动

五、表单元素行高不一致(IE,MOZ,C,O,S)
描述：表单元素行高对齐方式不一致
hack:给表单元素添加声明：float:left;

六、按钮元素默认大小不一
描述：各浏览器中按钮元素大小不一致
hack：统一大小
hack2:input外边套一个标签，在这个标签里写按钮的样式，把input的边框 和背景色去掉。
hack3:若是这个按钮是一个图片，直接把图片做为按钮的背景图便可。
浏览器解析按钮边框时，会把边框解析在按钮内部，不会影响按钮的原有大小

7)透明属性
IE浏览器写法：filter:alpha(opacity=value);
兼容其余浏览器写法：opacity:.value;(value的取值范围0-9)

在IE6及更低版本的浏览器里，若是想去掉input的默认边框，需将其border属性值设置成0方可兼容多个浏览器。

bug:子元素没设置任何浮动，设置了margin-top属性后，会错误的把margin-top的属性值添加给父元素.（块元素）
hack1:给父元素添加overflow:hidden；声明。
若是父元素设置了浮动属性也不会出现这个问题。

在属性前可加以上这三个符号
_ 只有IE6如下支持,例如_height:100px;

  • 只有IE7如下支持,例如*height:100px;

+只有IE7如下支持,例如+height:100px;
针对IE8加属性值后缀0（数字零）,例如：height:200px0;

！important优先级声明，只有高版本支持，IE6不支持

main{height:60px!important;}

解决方法：
例如：

main{height:60px!important;height:70px;}

注：同时设两个高度，优先级声明的属性要放到前面。

（四）JavaScript 兼容性

一、浏览器的宽高问题

var winW=document.body.clientWidth||document.docuemntElement.clientWidth;//网页可见区域宽
    var winH=document.body.clientHeight||document.docuemntElement.clientHeight;//网页可见区域宽
    //以上为不包括边框的宽高，若是是offsetWidth或者offsetHeight的话包括边框

var winWW=document.body.scrollWidth||document.docuemntElement.scrollWidth;//整个网页的宽
var winHH=document.body.scrollHeight||document.docuemntElement.scrollHeight;//整个网页的高

var scrollHeight=document.body.scrollTop||document.docuemntElement.scrollTop;//网页被卷去的高
var scrollLeft=document.body.scrollLeft||document.docuemntElement.scrollLeft;//网页左卷的距离

var screenH=window.screen.height;//屏幕分辨率的高
var screenW=window.screen.width;//屏幕分辨率的宽
var screenX=window.screenLeft;//浏览器窗口相对于屏幕的x坐标（除了FireFox）
var screenXX=window.screenX;//FireFox相对于屏幕的X坐标
var screenY=window.screenTop;//浏览器窗口相对于屏幕的y坐标（除了FireFox）
var screenYY=window.screenY;//FireFox相对于屏幕的y坐标

二、event事件问题

/event事件问题
    document.onclick=function(ev){//谷歌火狐的写法，IE9以上支持，往下不支持；
        var e=ev;
        console.log(e);
    }
    document.onclick=function(){//谷歌和IE支持，火狐不支持；
        var e=event;
        console.log(e);
    }
    document.onclick=function(ev){//兼容写法；
        var e=ev||window.event;
        var mouseX=e.clientX;//鼠标X轴的坐标
        var mouseY=e.clientY;//鼠标Y轴的坐标
    }

三、DOM节点相关的问题

function nextnode(obj){//获取下一个兄弟节点
        if (obj.nextElementSibling) {
            return obj.nextElementSibling;
        } else{
            return obj.nextSibling;
        };
    }
    function prenode(obj){//获取上一个兄弟节点
        if (obj.previousElementSibling) {
            return obj.previousElementSibling;
        } else{
            return obj.previousSibling;
        };
    }
    function firstnode(obj){//获取第一个子节点
        if (obj.firstElementChild) {
            return obj.firstElementChild;//非IE678支持
        } else{
            return obj.firstChild;//IE678支持
        };
    }
    function lastnode(obj){//获取最后一个子节点
        if (obj.lastElementChild) {
            return obj.lastElementChild;//非IE678支持
        } else{
            return obj.lastChild;//IE678支持
        };
    }

四、document.getElementsByClassName问题

//经过类名获取元素
    document.getElementsByClassName('');//IE 6 7 8不支持；

    //这里能够定义一个函数来解决兼容问题，固然别在这给我提jQuery...
    //第一个为全局获取类名，第二个为局部获取类名
    function byClass1(oClass){//全局获取，oClass为你想要查找的类名，没有“.”
        var tags=document.all?document.all:document.getElementsByTagName('*');
        var arr=[];
        for (var i = 0; i < tags.length; i++) {
            var reg=new RegExp('\\b'+oClass+'\\b','g');
            if (reg.test(tags[i].className)) {
                arr.push(tags[i]);
            };
        };
        return arr;//注意返回的也是数组，包含你传入的class全部元素；
    }

    function byClass2(parentID,oClass){//局部获取类名，parentID为你传入的父级ID
        var parent=document.getElementById(parentID);
        var tags=parent.all?parent.all:parent.getElementsByTagName('*');
        var arr=[];
        for (var i = 0; i < tags.length; i++) {
        var reg=new RegExp('\\b'+oClass+'\\b','g');
            if (reg.test(tags[i].className)) {
                arr.push(tags[i]);
            };
        };
        return arr;//注意返回的也是数组，包含你传入的class全部元素；
     }

五、获取元素的非行间样式值

//获取元素的非行间样式值
     function getStyle(object,oCss) {
             if (object.currentStyle) {
                 return object.currentStyle[oCss];//IE
             }else{
                 return getComputedStyle(object,null)[oCss];//除了IE
             }
     }

六、设置监听事件

function addEvent(obj,type,fn){//添加事件监听，三个参数分别为 对象、事件类型、事件处理函数，默认为false
        if (obj.addEventListener) {
            obj.addEventListener(type,fn,false);//非IE
        } else{
            obj.attachEvent('on'+type,fn);//ie,这里已经加上on，传参的时候注意不要重复加了
        };
    }
    function removeEvent(obj,type,fn){//删除事件监听
        if (obj.removeEventListener) {
            obj.removeEventListener(type,fn,false);//非IE
        } else{
            obj.detachEvent('on'+type,fn);//ie，这里已经加上on，传参的时候注意不要重复加了
        };
    }

七、元素到浏览器边缘的距离

function offsetTL(obj){//获取元素内容距离浏览器边框的距离（含边框）
        var ofL=0,ofT=0;
        while(obj){
            ofL+=obj.offsetLeft+obj.clientLeft;
            ofT+=obj.offsetTop+obj.clientTop;
            obj=obj.offsetParent;
        }
        return{left:ofL,top:ofT};
    }

八、阻止默认事件

//js阻止默认事件
    document.onclick=function(e){
        var e=e||window.event;
        if (e.preventDefault) {
            e.preventDefault();//W3C标准
        }else{
            e.returnValue='false';//IE..
        }
    }

九、关于EVENT事件中的target

//关于event事件中的target
    document.onmouseover=function(e){
        var e=e||window.event;
        var Target=e.target||e.srcElement;//获取target的兼容写法，后面的为IE
        var from=e.relatedTarget||e.formElement;//鼠标来的地方，一样后面的为IE...
        var to=e.relatedTarget||e.toElement;//鼠标去的地方
    }

十、鼠标滚轮滚动事件

//鼠标滚轮事件
    //火狐中的滚轮事件
    document.addEventListener("DOMMouseScroll",function(event){
        alert(event.detail);//若前滚的话为 -3，后滚的话为 3
    },false)
    //非火狐中的滚轮事件
    document.onmousewheel=function(event){
        alert(event.detail);//前滚：120，后滚：-120
    }

完结

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程