利用jQuery的$.event.fix函数统一浏览器event事件处理


Posted in Javascript onDecember 21, 2009

比如得到触发事件的元素引用在IE浏览器下是:event.srcElement,在FF浏览器下则是:event.target,另外又比如在FF浏览器下得到光标相对页面的位置是event.pageX,而IE浏览器下的处理方式又是不一样的,当然还有一些像“阻止事件冒泡”以及“取消浏览器默认行为”等,不同浏览器也有不同的处理方式,如果我们要使JavaScript在不同的浏览器下能正常处理事件代码,就要分别进行判断处理。现在jQuery为我们提供了统一兼容处理函数$.event.fix(e),这个函数官方并没有在文档中说明用法,是我在阅读框架代码的时候发现可以这样使用。
一、如何使用
使用jQuery的event兼容处理主要分以下几个简单步骤进行:
1、在网页head区引用jQuery框架库文件;
2、定义一个事件处理方法,在调用的地方统一传入event参数;
3、在事件方法内部首先利用$.event.fix把旧的事件转换成新的事件引用;
4、在事件方法后面使用经过兼容处理后的事件对象方法和属性。
二、使用示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>利用jQuery的$.event.fix函数统一浏览器event处理</title> 
<script type="text/javascript" src="http://img.3water.com/jslib/jquery/jquery.js"></script> 
</head> 
<body> 
<input type="button" value="http://w3water.com" onclick="eventHandler(event)" /> 
<script type="text/javascript"> 
//请使用不同浏览器测试本页,你将看到一样的结果 
function eventHandler(e) 
{ 
var event = $.event.fix(e); 
var elem = event.target; 
alert('当前点击对象的标签名是:' + elem.tagName); 
alert('当前点击按钮文本是:' + elem.value); 
alert('pageX:' + event.pageX + ',pageY:' + event.pageY); 
//得到按键码 
event.keyCode 
//取消浏览器默认行为 
event.preventDefault(); 
//取消事件冒泡 
event.stopPropagation(); 
//...还有好些不是很常用属性,这里不一一列举 
} 
</script> 
</body> 
</html>

三、jQuery $.event.fix方法定义原代码参考
fix: function(event) 
{ 
if (event[expando] == true) 
return event; 
// store a copy of the original event object 
// and "clone" to set read-only properties 
var originalEvent = event; 
event = 
{ 
originalEvent: originalEvent 
}; 
var props = "altKey attrChange attrName bubbles button cancelable charCode clientX clientY ctrlKey currentTarget data detail eventPhase fromElement handler keyCode metaKey newValue originalTarget pageX pageY prevValue relatedNode relatedTarget screenX screenY shiftKey srcElement target timeStamp toElement type view wheelDelta which".split(" "); 
for (var i = props.length; i; i--) 
event[props[i]] = originalEvent[props[i]]; 
// Mark it as fixed 
event[expando] = true; 
// add preventDefault and stopPropagation since 
// they will not work on the clone 
event.preventDefault = function() 
{ 
// if preventDefault exists run it on the original event 
if (originalEvent.preventDefault) 
originalEvent.preventDefault(); 
// otherwise set the returnValue property of the original event to false (IE) 
originalEvent.returnValue = false; 
}; 
event.stopPropagation = function() 
{ 
// if stopPropagation exists run it on the original event 
if (originalEvent.stopPropagation) 
originalEvent.stopPropagation(); 
// otherwise set the cancelBubble property of the original event to true (IE) 
originalEvent.cancelBubble = true; 
}; 
// Fix timeStamp 
event.timeStamp = event.timeStamp || now(); 
// Fix target property, if necessary 
if (!event.target) 
event.target = event.srcElement || document; // Fixes #1925 where srcElement might not be defined either 
// check if target is a textnode (safari) 
if (event.target.nodeType == 3) 
event.target = event.target.parentNode; 
// Add relatedTarget, if necessary 
if (!event.relatedTarget && event.fromElement) 
event.relatedTarget = event.fromElement == event.target ? event.toElement : event.fromElement; 
// Calculate pageX/Y if missing and clientX/Y available 
if (event.pageX == null && event.clientX != null) 
{ 
var doc = document.documentElement, body = document.body; 
event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc.clientLeft || 0); 
event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc.clientTop || 0); 
} 
// Add which for key events 
if (!event.which && ((event.charCode || event.charCode === 0) ? event.charCode : event.keyCode)) 
event.which = event.charCode || event.keyCode; 
// Add metaKey to non-Mac browsers (use ctrl for PC's and Meta for Macs) 
if (!event.metaKey && event.ctrlKey) 
event.metaKey = event.ctrlKey; 
// Add which for click: 1 == left; 2 == middle; 3 == right 
// Note: button is not normalized, so don't use it 
if (!event.which && event.button) 
event.which = (event.button & 1 ? 1 : (event.button & 2 ? 3 : (event.button & 4 ? 2 : 0))); 
return event; 
}

作者:WebFlash
出处:http://webflash.cnblogs.com
Javascript 相关文章推荐
ASP.NET中基于JQUERY的高性能的TreeView补充
Feb 23 Javascript
利用浏览器全屏api实现js全屏
Jan 16 Javascript
JQuery点击行tr实现checkBox选中的简单实例
May 26 Javascript
很酷的星级评分系统原生JS实现
Aug 25 Javascript
JS常用算法实现代码
Nov 14 Javascript
bootstrap警告框使用方法解析
Jan 13 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
May 18 Javascript
关于Vue.nextTick()的正确使用方法浅析
Aug 25 Javascript
Vue 使用中的小技巧
Apr 26 Javascript
Angularjs中date过滤器失效的问题及解决方法
Jul 06 Javascript
JS module的导出和导入的实现代码
Feb 25 Javascript
微信小程序自定义组件components(代码详解)
Oct 21 Javascript
jQuery 连续列表实现代码
Dec 21 #Javascript
jQuery解决iframe高度自适应代码
Dec 20 #Javascript
IE 上下滚动展示模仿Marquee机制
Dec 20 #Javascript
js控制div及网页相关属性的代码
Dec 19 #Javascript
JQuery Tips(4) 一些关于提高JQuery性能的Tips
Dec 19 #Javascript
JS 的应用开发初探(mootools)
Dec 19 #Javascript
用js实现层随着内容大小动态渐变改变 推荐
Dec 19 #Javascript
You might like
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
9个PHP开发常用功能函数小结
2011/07/15 PHP
thinkphp中连接oracle时封装方法无法用的解决办法
2013/06/17 PHP
php封装的验证码类分享
2017/02/26 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
js继承 Base类的源码解析
2008/12/30 Javascript
JQuery Dialog的内存泄露问题解决方法
2010/06/18 Javascript
jquery.validate使用攻略 第三部
2010/07/01 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
Bootstrap Table使用心得总结
2016/11/29 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
移动端脚本框架Hammer.js
2016/12/15 Javascript
Bootstrap3 内联单选和多选框
2016/12/29 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
2017/08/31 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
修改vue+webpack run build的路径方法
2018/09/01 Javascript
详解vue3.0 diff算法的使用(超详细)
2020/07/01 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
2020/07/17 Javascript
解决vant title-active-color与title-inactive-color不生效问题
2020/11/03 Javascript
Python之os操作方法(详解)
2017/06/15 Python
python实现快速排序的示例(二分法思想)
2018/03/12 Python
Python 操作 ElasticSearch的完整代码
2019/08/04 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
python实现人机五子棋
2020/03/25 Python
python装饰器实现对异常代码出现进行自动监控的实现方法
2020/09/15 Python
python requests库的使用
2021/01/06 Python
Crocs卡骆驰洞洞鞋日本官方网站:Crocs日本
2016/08/25 全球购物
欧舒丹比利时官网:L’OCCITANE比利时
2017/04/25 全球购物
中学自我评价
2014/01/31 职场文书
财务学生的职业生涯发展
2014/02/11 职场文书
单位实习鉴定评语
2015/01/04 职场文书
简爱电影观后感
2015/06/10 职场文书
小学语文国培研修日志
2015/11/13 职场文书
年会邀请函的格式及范文五篇
2019/11/02 职场文书
基于PyTorch实现一个简单的CNN图像分类器
2021/05/29 Python