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

发布时间：2018-08-18 06:03:28 所属栏目：业界来源：站长网

导读：做WEB前端开发的人都知道不同的浏览器对事件的处理方式是有区别的，比如得到触发事件的元素引用在 IE浏览器下是：event.srcElement，在FF浏览器下则是：event.target，另外又比如在FF浏览器下得到光标相对页面的位置是event.pageX，而IE浏览器下的处理方

做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.veryhuo.com/uploads/Common/jquery-1.3.2.min.js"></script> </head> <body> <input type="button" value="http://www.veryhuo.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.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

壹号本新款 ONE XPLAY	特斯拉前 CTO 电动汽车
华硕公布新款天选3 搭	主流显卡最新场批价曝