利用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 相关文章推荐
用javascript控制iframe滚动的代码
Apr 10 Javascript
JS等比例缩小图片尺寸的实例
Feb 27 Javascript
YUI模块开发原理详解
Nov 18 Javascript
jQuery修改class属性和CSS样式整理
Jan 30 Javascript
js兼容火狐获取图片宽和高的方法
May 21 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
Jul 09 Javascript
php register_shutdown_function函数详解
Jul 23 Javascript
深入理解Node.js中通用基础设计模式
Sep 19 Javascript
bootstrap datetimepicker控件位置异常的解决方法
Nov 23 Javascript
JS实现根据指定值删除数组中的元素操作示例
Aug 02 Javascript
js实现每日签到功能
Nov 29 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
Apr 10 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
新手配置 PHP 调试环境(IIS+PHP+MYSQL)
2007/01/10 PHP
让的PHP代码飞起来的40条小技巧(提升php效率)
2010/04/12 PHP
PHP中header和session_start前不能有输出原因分析
2013/01/11 PHP
coreseek 搜索英文的问题详解
2013/06/08 PHP
Smarty模板变量调节器用法分析
2016/05/23 PHP
jQuery+HTML5加入购物车代码分享
2020/10/29 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
2015/09/19 Javascript
精通JavaScript的this关键字
2020/05/28 Javascript
js实现(全选)多选按钮的方法【附实例】
2016/03/30 Javascript
Bootstrap每天必学之标签页(Tab)插件
2020/08/09 Javascript
微信小程序 animation API详解及实例代码
2016/10/08 Javascript
Bootstrap CSS布局之表格
2016/12/17 Javascript
jQuery源码分析之init的详细介绍
2017/02/13 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
2017/10/31 Javascript
使用axios实现上传图片进度条功能
2017/12/21 Javascript
angular 数据绑定之[]和{{}}的区别
2018/09/25 Javascript
require.js 加载过程与使用方法介绍
2018/10/30 Javascript
解决antd Form 表单校验方法无响应的问题
2020/10/27 Javascript
Python文件读写保存操作的示例代码
2018/09/14 Python
浅析Python 引号、注释、字符串
2019/07/25 Python
Python运行DLL文件的方法
2020/01/17 Python
Python requests接口测试实现代码
2020/09/08 Python
Scrapy项目实战之爬取某社区用户详情
2020/09/17 Python
如何在Anaconda中打开python自带idle
2020/09/21 Python
Python urllib3软件包的使用说明
2020/11/18 Python
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
英国最大最好的无人机商店:Drones Direct
2019/07/12 全球购物
小小的船教学反思
2014/02/21 职场文书
个人委托书格式
2014/04/04 职场文书
党员民主生活会个人整改措施材料
2014/09/16 职场文书
读完《骆驼祥子》的观后感!
2019/07/05 职场文书
python图像处理基本操作总结(PIL库、Matplotlib及Numpy)
2021/06/08 Python
vue实现列表拖拽排序的示例代码
2022/04/08 Vue.js
Elasticsearch 索引操作和增删改查
2022/04/19 Python
Nginx 匹配方式
2022/05/15 Servers
解决Git推送错误non-fast-forward的方法
2022/06/25 Servers