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

比如得到触发事件的元素引用在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.jb51.net/jslib/jquery/jquery.js"></script>
</head>
<body>
<input type="button" value="http://wwww.jb51.net" 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

时间: 2024-11-05 14:38:29

利用jQuery的$.event.fix函数统一浏览器event事件处理_jquery的相关文章

利用JQuery给div按钮加上统一的动态效果

我们有时候要在网页中做一些好看的按钮,这个时候就不能利用<input type="button" ...>,我们要利用div来做.但是由于,div本身不是按钮,如果鼠标放上去的时候,不会变成手形,在以前,我们会给每个div加上 onMouseover="this.style.cursor='hand'"但是这样做太麻烦了,因为按钮可能很多. 如果利用JQuery,我们利用简单的JS语句就能做到.这样做的好处是:我们可以做到代码的封装,把JS代码保存在文件

利用jQuery插件imgAreaSelect实现获得选择域的图像信息_jquery

还是先来分析一下: (以下的值,如何获得,以后在具体的实现中再来分析,现在只谈宏观的) 如何获得选择域的图像信息?  其实就是要我们如何获得这个选择区域,在图像中的那个位置,并且这个区域的大小是多少? 把位置和大小告诉了计算机,它就知道我们是要获取那一块的图像信息了. (我们的选择区域,是在一个平面当中,而且是一个规则的图形,正方形,或都矩形(通俗:长方形)) 大小: 这个区域的宽度,高度值,两值相乘,就是这个区域的面积,即大小.(这个应该不难) 位置: 1.假设我们只告诉计算机,这个选择区域一

jQuery的实现原理的模拟代码 -3 事件处理_jquery

在对象的私有扩展对象上,专门增加了一个名为 events 的事件管理对象,在这个对象上每种事件分别对应一个同名的属性,这个属性的值是一个数组,针对这个事件的处理程序依次压入这个数组中,构成一个事件处理的列表.自定义的事件处理函数即被压入这个列表中. 在事件触发的时候,通过注册的匿名函数来执行 jQuery.event.handle ,由于使用了闭包,所以在这个函数中的 this 就是事件源对象,通过这个事件源对象找到对象的私有扩展数据,然后在 events 中找到对应的事件处理程序列表,最后,依

jquery中常用的函数和属性详细解析_jquery

Dom:Attribute:属性$("p").addClass(css中定义的样式类型); 给某个元素添加样式$("img").attr({src:"test.jpg",title:"test Image"}); 给某个元素添加属性/值,参数是map$("input").attr({"checked", "checked"}); $("img").

利用jQuery 实现GridView异步排序、分页的代码_jquery

每次请求备份管理页面时,服务端会把所以的备份还原信息都传到客户端,然后ui.tabs将两种信息折叠起来分别显示,好在ui.tabs给我提供ajax功能,我们的每个tab可以直接应用另外一个页面 如: 复制代码 代码如下: <div id="container"> <ul> <li><a href="#fragment-1"><span>备份</span></a></li>

JQuery中的ready函数冲突的解决方法_jquery

一个aspx页面通常可以包含其它ascx控件,如果在多人协同开发的情况下:程序员小张在控件A.ascx中使用了 $().ready(function{}),而程序员小王又在控件B.ascx中也使用了ready函数,程序员小李在做页面时,把A.ascx,B.ascx都拖到自己的页面中,然后在页面中也需要用到$().ready函数,这下好了: 虽然jQuery本身的设计还算不错,document加载完成后会依次触发各个ready中定义的function(这一点很好,不象javascript中默认后面

利用Jquery队列实现根据输入数量显示的动画_jquery

先来看看要实现的效果图 如上面的gif图所示,可以在输入框中,输入要产生的动画的数量,然后点击click me按钮,就产生了效果.产生的效果是通过在数组中预设的几种.这里为了演示方便,没有设置具体的形状,比如可以更换为一些其它的iconfont来实现效果. 实现思路 通过$.queue和$.dequeue来实现动画队列的存取与取出实现效果.首先通过按照input输入的数字来形成对应数量效果对象的数组.然后在把数组存放到$.queue中,最后通过click me按钮触发,一个一个取出动画序列,实现

利用jquery实现下拉框的禁用与启用_jquery

话不多说,附上实例代码,仅供大家参考 禁用下拉框 //下拉框禁用 $("select").each(function () { $("#" + this.id).attr("disabled", true); }); 启用下拉框 //下拉框启用 $("select").each(function () { $("#" + this.id).removeAttr("disabled");

利用jquery的获取JS文件中的字符串内容_jquery

复制代码 代码如下: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script type="text/javascript"> var _url = "http://www.baidu.com/cache/hps/js/hp