2016年2月19日个人博客文章--迁移到segmentfault

当我们在编写JS用于处理事件时,由于考虑到不同浏览器间Js代码兼容不同,代码不易记忆,于是做出如下整理。(当然以后还会增加更新的。。。)

示例代码如下:

(1)阻止默认事件

obj.onclick=function(ev){
var event=ev||window.event;
if(event.preventDefault){
event.preventDefault(); /*W3C标准*/
}else{
event.returnValue=false; /*兼容IE*/
}
}

小提示:return false; 也能阻止默认事件 但是要注意位置。

(2)获取下(上)一个兄弟节点

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;
}
}

(3)获取第一个子(最后一个)节点

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支持*/
}
}

(4)添加(移除)事件监听

function addEvent(obj,type,fn){ /*添加事件*/
if(obj.addEventListener){
obj.addEventListener(type,fn,false); //非IE添加事件监听
}else{
obj.attachEvent('on'+type,fn); //IE添加事件绑定
stopEvent();
}
}
function removeEvent(obj,type,fn){ //移除事件
if(obj.removeEventListener){
obj.removeEventListener(type,fn,false); //非IE移除事件,移除事件,第三个参数必须是函数名
}else{
obj.detachEvent('on'+type,fn); //IE移除事件
}
}

(5)举例click事件阻止事件传播

obj.onclick=function(ev){
var event=ev||window.event;
alert('aa');
if(event.stopPropagation){
event.stopPropagation(); //非IE阻止事件传播
}else{
event.cancelBubble=true; //IE阻止事件传播
}
}

(6)mouseover与mouseover的事件委托(经常用到,用于去除当 鼠标浮动到元素容器中不同子元素间出现闪动问题。只需在函数function(ev){} 头部添加以下代码即可)

// mouseover委托事件
var event=ev||window.event;
// var from=event.fromElement||event.relatedTarget;
//在mouseover事件中from,表示鼠标来自哪个元素,也是事件委托类型,和target与srcElement相反
// alert(from);
var from=event.fromElement||event.relatedTarget;
while(from){
if (this==from) {
return false;
};
from=from.parentNode;
}
//mouseout委托事件
var event=ev||window.event;
var to=event.toElement||event.relatedTarget;
//在mouseout事件中to,表示鼠标指向那个元素,也是事件委托类型,和target与srcElement相反
// alert(to)
while(to){
if (this==to) {
return false;
};
to=to.parentNode;
}

(7)滚轮事件

box.onmousewheel=function (ev){
var event=ev||window.event;
// box.innerHTML='鼠标滚动'+event.wheelDelta;
if (event.wheelDelta>0) {
alert('鼠标前滚');//非火狐 前滚120
} else{
alert('鼠标后滚')//非火狐 后滚-120
};
}*/
box.addEventListener('DOMMouseScroll',function (ev){
var event=ev||window.event;
alert(event.detail);//火狐前滚:-3 ,后滚:3
},false)//IE678不支持

8.js按需加载 异步加载
demo.js如下

function test() {
console.log('hello');
}

index.html如下

  function loadScript(url,callback){
var script=document.createElement('script');
script.type='text/javascript';
if(script.readyState){ //ie
script.onreadystatechange=function(){
if(script.readyState=='complete'||script.readyState=='loaded'){
callback()
}
}
}else{
script.onload=function(){ //Safari chrome firefox opera ----Ie script不具备onload方法
callback();
}
}
script.src=url; //写在这里是为了防止onreadystatechange状态不改变
document.head.appendChild(script)
}
loadScript('demo.js',function(){test()})

存在不同浏览器间的JS兼容总结的更多相关文章

  1. 浏览器间CSS样式兼容问题

    1.display:table居中显示 在chrome和safari浏览器上兼容问题 2.滤镜 在chrome浏览器中能正常显示,在360浏览器中不能正常显示 3.省略号问题 对于一行显示,基本上对所 ...

  2. 关于页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题

    需求 最近在做博客的目录功能,发现一个在现代浏览器间的一个bug,或是称之为差异,即页面滚动值(scrollTop)的获取与设定. 在此之前先说一下关于页面元素的坐标获取,这张图的经典性不必再提. 实 ...

  3. JS兼容各个浏览器的本地图片上传即时预览效果

    JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...

  4. css js 兼容问题

    js  兼容问题 1. document.form.item 问题问题:代码中存在 document.formName.item("itemName") 这样的语句,不能在FF下运 ...

  5. Safari浏览器中对js Date对象的支持

    看了一下自己上一次写博客还是3月份,那是还没有毕业,实习也没那么多事情,毕业设计也才刚开始做,那时天天晚上都把电脑带回家继续学习,而现在一工作忙为借口已经不怎么进行什么知识总结了,只是在印象笔记里做做 ...

  6. 【js】IE、FF、Chrome浏览器中的JS差异介绍

    如何判断浏览器类型 转:http://www.cnblogs.com/carekee/articles/1854674.html 1.通过浏览器特有的对象 如ie 的ActiveXObject  ff ...

  7. 浏览器检测(BrowserDetect.js)

    浏览器检测是在工作中经常用到的,如果只是简单判断当前是什么浏览器的话可以通过window.navigator.useragent这样的js来直接判断就可以了! 但是针对浏览器版本要求比较高的时候,如果 ...

  8. 谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法,跨域调用JS不再是难题!

    谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法 导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个 ...

  9. 浏览器检测(BrowserDetect.js)使用

    浏览器检测是在工作中经常用到的,如果只是简单判断当前是什么浏览器的话可以通过window.navigator.useragent这样的js来直接判断就可以了! 但是针对浏览器版本要求比较高的时候,如果 ...

随机推荐

  1. nodejs 对接微信 express 对接微信

    安装引用 npm install express npm install body-parser npm install express-xml-bodyparser npm install axio ...

  2. [19/10/16-星期三] Python中的模块和包、异常、操作文件

    一.模块 # 模块(module) # 模块化,模块化指将一个完整的程序分解为一个一个小的模块 # 通过将模块组合,来搭建出一个完整的程序 # 不采用模块化,统一将所有的代码编写到一个文件中 # 采用 ...

  3. 基于webstorm卡顿问题的2种解决方法

    基于webstorm卡顿问题的2种解决方法:https://www.jb51.net/article/128441.htm

  4. CF682C Alyona and the Tree

    题意翻译 题目描述 给你一棵树,边与节点都有权值,根节点为1,现不停删除叶子节点形成新树,问最少删掉几个点,能使得最后剩下的树内,∀v与其子树内∀u间边权的和小于点u权值 输入输出格式 输入格式: 第 ...

  5. liunx驱动----信号量的实现

    使用信号量必须包含  <asm/semaphore.h>  头文件.其中相关结构体  struct semaphore 可以通过以下几种方式来声明或者初始化. 1.void sema_in ...

  6. [VINS]IMU与相机之间旋转量的标定

    VINS-Mono[1]中IMU-Camera外参旋转量\(R_b^c\)的计算方法在他们实验室发的之前的论文有详细讲解[2].视觉利用匹配特征点中的基础矩阵求出相机坐标系下两帧的旋转量\(R_{c_ ...

  7. 【React -- 4/100】 生命周期

    生命周期 概述 意义:组件的生命周期有助于理解组件的运行方式,完成更复杂的组件功能.分析组件错误原因等 组件的生命周期: 组件从被创建到挂载到页面中运行,再到组件不在时卸载的过程 生命周期的每个阶段总 ...

  8. MySQL索引面试题分析(索引分析,典型题目案例)

    [建表语句] create table test03( id int primary key not null auto_increment, c1 char(10), c2 char(10), c3 ...

  9. SVN本地搭建服务

    本地搭建svn 服务端并使用 1.下载SVN服务端软  VisualSVN server 地址:http://subversion.apache.org/packages.html 2.安装 Visu ...

  10. 31.密码学知识-证书CA/PKI-8——2019年12月19日

    1. 证书 公钥证书(Public-Key Certificate,PKC)其实和驾照很相似,里面记有姓名.组织.邮箱地址等个人信息,以及属于此人的公钥, 并由认证机构(Certification A ...