EventUtil处理js兼容性问题
var EventUtil={
addHandler:function(element,type,handler){ //添加事件
if(element.addEventListener){
element.addEventListener(type,handler,false); //使用DOM2级方法添加事件
}else if(element.attachEvent){ //使用IE方法添加事件
element.attachEvent("on"+type,handler);
}else{
element["on"+type]=handler; //使用DOM0级方法添加事件
}
},
removeHandler:function(element,type,handler){ //取消事件
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,handler);
}else{
element["on"+type]=null;
}
},
getEvent:function(event){ //使用这个方法跨浏览器取得event对象
return event?event:window.event;
},
getTarget:function(event){ //返回事件的实际目标
return event.target||event.srcElement;
},
preventDefault:function(event){ //阻止事件的默认行为
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
stopPropagation:function(event){ //立即停止事件在DOM中的传播
//避免触发注册在document.body上面的事件处理程序
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
},
getRelatedTarget:function(event){ //获取mouseover和mouseout相关元素
if(event.relatedTarget){
return event.relatedTarget;
}else if(event.toElement){ //兼容IE8-
return event.toElement;
}else if(event.formElement){
return event.formElement;
}else{
return null;
}
},
getButton:function(event){ //获取mousedown或mouseup按下或释放的按钮是鼠标中的哪一个
if(document.implementation.hasFeature("MouseEvents","2.0")){
return event.button;
}else{
switch(event.button){ //将IE模型下的button属性映射为DOM模型下的button属性
case 0:
case 1:
case 3:
case 5:
case 7:
return 0; //按下的是鼠标主按钮(一般是左键)
case 2:
case 6:
return 2; //按下的是中间的鼠标按钮
case 4:
return 1; //鼠标次按钮(一般是右键)
}
}
},
getWheelDelta:function(event){ //获取表示鼠标滚轮滚动方向的数值
if(event.wheelDelta){
return event.wheelDelta;
}else{
return -event.detail*40;
}
},
getCharCode:function(event){ //以跨浏览器取得相同的字符编码,需在keypress事件中使用
if(typeof event.charCode=="number"){
return event.charCode;
}else{
return event.keyCode;
}
}
};
注意:
1、IE的attachEvent()与addEventLisener()添加的匿名函数是无法移除的。
2、attachEvent() 与 DOM0级的方法,主要区别:事件处理程序作用域:attachEvent()会在全局作用域;DOM0 作用域会在其所属元素。
EventUtil处理js兼容性问题的更多相关文章
- IE 和Firefox的js兼容性总结
IE 和Firefox的js兼容性总结 12 August 2010 11:39 Thursday by 小屋 标签: 浏览器 方法 属性 IT 写法 一.函数和方法差异 1 . getYear()方 ...
- webpack 之js兼容性处理
webpack 之js兼容性处理 // 用来拼接绝对路径的方法 const {resolve} = require('path') const HtmlWebpackPlugin = require( ...
- js兼容性问题总结
JS中出现的兼容性问题的总结1.关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题 我们都知道js通过style不可以获取行外样式,当我们需要获取行外 ...
- js兼容性记录
做BS开发就难免会用到javascript,而每个浏览器对javascript的支持有不同.这就需要我们程序员去兼容他们,不然有些浏览器就无法运行我们的代码.就会造来客户的投诉,如果让BoSS知道了, ...
- ff与ie 的关于js兼容性
FF的FIREBUG,不仅能测试JS还能检查CSS错误,是一般常用的.但它主要检查FF方面的错误,对IE就无能为力了.要测试IE,就用ieTester,它可以测试IE几乎所有版本(1.0恐怕也用不到测 ...
- JS兼容性问题列表
记录平时遇见的兼容性问题,有更好的解决办法希望各位提出,会随着开发遇到问题而更新,标记为黄色的为未解决和猜测答案 提出时间 问题描述 解决方案 2014/10/22 submit按钮阻止了默认事件不能 ...
- js兼容性大全
js有个第二定律好的属性/选择器一定不兼容/* 获取类名通用代码*/function getClassName(){ if(document.getElementsByClassName){ doso ...
- js兼容性问题
javscript 浏览器兼容性问题: scrollTop = document.documentElement.scrollTop || document.body.scrollTop; scrol ...
- JS兼容性问题(FF与IE)
不同浏览器中js兼容问题大全 1.document.formName.item('itemName')问题 说明: //IE下(两种) document.formName.item("ite ...
随机推荐
- HBase 相关API操练(三):MapReduce操作HBase
MapReduce 操作 HBase 在 HBase 系统上运行批处理运算,最方便和实用的模型依然是 MapReduce,如下图所示. HBase Table 和 Region 的关系类似 HDFS ...
- Spring Cloud微服务初探
学习初衷 因为加了不少优秀的知识星球,结交了更多的小伙伴,加了更多的群,每每在自我介绍的时候,都说自己是Android & Java攻城狮. 然鹅,有的小伙伴就来问了,你是搞Java的,那对S ...
- JQuery初识(二)
一丶链式编程 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- 【web】movie review——静态页面训练、css训练
实现样式要求: image: banner.png: generaloverview.png: background.png: bannerbackground.png: rottenbig.png: ...
- jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})等的区别讲解
1.(function($){...})(jQuery); (1).原理: 这实际上是匿名函数,如下: function(arg){...} 这就定义了一个匿名函数,参数为arg:而调用函 ...
- ArcGIS for Server新建站点异常,Failed to create the site.Failed to configure the server machine'XXXX',Server machine'XXXX' is not a local server machine.
系统环境:操作系统Win7 64位,装在虚拟机VM中,ArcGIS for Server 10.2.1 问题描述:ArcGIS for Server 10.2.1安装并授权完成后,站点初始化时显示 ...
- C#类型简述
一.值类型 1.布尔类型 bool,范围 true false 2.整数类型 sbyte,范围 -128~127 byte,范围 0~255 short,范围 -32768~32767 ushort, ...
- SAP云平台运行环境Cloud Foundry和Neo的区别
SAP云平台提供了两套运行环境:Cloud Foundry和Neo 从下图能发现,Cloud Foundry的运行环境,基础设施由第三方公司提供,比如Amazon亚马逊和Microsoft微软,SAP ...
- SAP成都研究院C4C光明左使:SAP Cloud for Customer 使用SAP UI5的独特之处
大家好,今天的文章来自我的同事,Yang Joey. 2017年7月,SAP成都研究院C4C开发团队刚刚建立.某个周一早晨的Scrum meeting,新出现一位眉清目秀的小伙子,向大家自我介绍:&q ...
- 打造颠覆你想象中的高性能,轻量级的webform框架---js直接调后台的封装(第三天)
如果你没有看我第二天写的内容的,我想你是看不懂的!!!! 好了,废话不多说,怎么才能让我们的代码变得牛逼起来呢?怎么封装我们的代码呢?我们不可能 每个页面都需要那样写吧,那我们来一步一步来封装 我们的 ...