程序员人生网站导航

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

栏目：jquery时间：2014-02-07 07:27:02

做WEB前端开发的人都知道不同的浏览器对事件的处理方式是有区别的，比如得到触发事件的元素引用在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=GBK" /><title>利用jQuery的$.event.fix函数统一浏览器event处理</title><script type="text/javascript" src="http://www.wfuyu.com/uploads/Common/jquery-1.3.2.min.js"></script></head><body><input type="button" value="http://www.wfuyu.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><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

------分隔线----------------------------

上一篇 运营网站也要讲究水到渠成一切顺其自然

下一篇 Web服务器和应用程序服务器的区别

------分隔线----------------------------