javascript浏览器兼容教程之事件处理


Posted in Javascript onJune 09, 2014

1. window.event

【分析说明】先看一段代码

function et()
{ 
alert(event);//IE: [object]
}

以上代码在IE运行的结果是[object],而在Firefox无法运行。

因为在IE中event作为window对象的一个属性可以直接使用,但是在Firefox中却使用了W3C的模型,它是通过传参的方法来传播事件的,也就是说你需要为你的函数提供一个事件响应的接口。

【兼容处理】添加对event判断,根据浏览器的不同来得到正确的event:

function et()
{ 
evt=evt?evt:(window.event?window.event:null);
//兼容IE和Firefox
alert(evt);
}

2. 键盘值的取得

【分析说明】IE和Firefox获取键盘值的方法不同,可以理解,Firefox下的event.which与IE下的event.keyCode相当。关于彼此不同,可参考《键盘事件中keyCode、which和charCode 的兼容性测试》

【兼容处理】
复制代码

function myKeyPress(evt){
//兼容IE和Firefox获得keyBoardEvent对象
evt = (evt) ? evt : ((window.event) ? window.event : "")
//兼容IE和Firefox获得keyBoardEvent对象的键值
var key = evt.keyCode?evt.keyCode:evt.which;
if(evt.ctrlKey && (key == 13 || key == 10)){


//同时按下了Ctrl和回车键
//do something;
}
}

3. 事件源的获取

【分析说明】在使用事件委托的时候,通过事件源获取来判断事件到底来自哪个元素,但是,在IE下,event对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性。

【兼容处理】

ele=function(evt){ //捕获当前事件作用的对象
evt=evt||window.event;
return

(obj=event.srcElement?event.srcElement:event.target;);
}

4. 事件监听

【分析说明】在事件监听处理方面,IE提供了attachEvent和detachEvent两个接口,而Firefox提供的是addEventListener和removeEventListener。

【兼容处理】最简单的兼容性处理就是封装这两套接口:

function addEvent(elem, eventName, handler) {
if (elem.attachEvent) {


elem.attachEvent("on" + eventName, function(){










handler.call(elem)});


//此处使用回调函数call(),让this指向elem

} else if (elem.addEventListener) {


elem.addEventListener(eventName, handler, false);

}
}
function removeEvent(elem, eventName, handler) {

if (elem.detachEvent) {


elem.detachEvent("on" + eventName, function(){










handler.call(elem)});


//此处使用回调函数call(),让this指向elem

} else if (elem.removeEventListener) {


elem.removeEventListener(eventName, handler, false);

}
}

需要特别注意,Firefox下,事件处理函数中的this指向被监听元素本身,而在IE下则不然,可使用回调函数call,让当前上下文指向监听的元素。

5. 鼠标位置

【分析说明】IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,even对象有pageX,pageY属性,但是没有x,y属性。

【兼容处理】使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX。复杂点还要考虑绝对位置。

function getAbsPoint(e){
var x = e.offsetLeft, y = e.offsetTop;
while (e = e.offsetParent) {
x += e.offsetLeft;
y += e.offsetTop;
}
alert("x:" + x + "," + "y:" + y);
}
Javascript 相关文章推荐
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
Dec 28 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
Apr 15 Javascript
JS日期和时间选择控件升级版(自写)
Aug 02 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
Dec 26 Javascript
javascript实现全角转半角的方法
Jan 23 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
Aug 15 Javascript
jQuery给表格添加分页效果
Mar 02 Javascript
JS实现商品筛选功能
Aug 19 Javascript
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
Sep 30 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
Mar 25 Javascript
JS实现纸牌发牌动画
Jan 19 Javascript
jQuery学习笔记之toArray()
Jun 09 #Javascript
jQuery学习笔记之jQuery原型属性和方法
Jun 09 #Javascript
jQuery简易图片放大特效示例代码
Jun 09 #Javascript
js操作模态窗口及父子窗口间相互传值示例
Jun 09 #Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
Jun 09 #Javascript
js利用prototype调用Array的slice方法示例
Jun 09 #Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
Jun 09 #Javascript
You might like
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
php判断当前用户已在别处登录的方法
2015/01/06 PHP
基于PHP实现等比压缩图片大小
2016/03/04 PHP
jquery索引在使用中的一些困惑
2013/10/24 Javascript
Node调试工具JSHint的安装及配置教程
2014/05/27 Javascript
js获取日期:昨天今天和明天、后天
2014/06/11 Javascript
jquery+html5烂漫爱心表白动画代码分享
2015/08/24 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
2016/01/21 Javascript
JavaScript原生对象常用方法总结(推荐)
2016/05/13 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
2016/10/09 Javascript
微信小程序前端自定义分享的实现方法
2019/06/13 Javascript
layui实现数据表格隐藏列的示例
2019/10/25 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
解决Antd Table组件表头不对齐的问题
2020/10/27 Javascript
python调用java的Webservice示例
2014/03/10 Python
python获取指定路径下所有指定后缀文件的方法
2015/05/26 Python
python中子类调用父类函数的方法示例
2017/08/18 Python
Python使用回溯法子集树模板获取最长公共子序列(LCS)的方法
2017/09/08 Python
Python3读取Excel数据存入MySQL的方法
2018/05/04 Python
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
2019/07/18 Python
使用python脚本自动创建pip.ini配置文件代码实例
2019/09/20 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
Python flask框架端口失效解决方案
2020/06/04 Python
python访问hdfs的操作
2020/06/06 Python
Pandas把dataframe或series转换成list的方法
2020/06/14 Python
python 如何设置守护进程
2020/10/29 Python
阿迪达斯法国官方网站:adidas法国
2018/03/20 全球购物
描述RIP和OSPF区别以及特点
2015/01/17 面试题
外贸实习生自荐信范文
2013/11/24 职场文书
农村婚礼主持词
2014/03/13 职场文书
服务型党组织建设典型材料
2014/05/07 职场文书
社区党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
导游词之江南园林狮子林
2019/09/16 职场文书
MyBatis-Plus 批量插入数据的操作方法
2021/09/25 Java/Android
Jpa Specification如何实现and和or同时使用查询
2021/11/23 Java/Android