利用jQuery的$.event.fix函数统一浏览器event事件处理
比如得到触发事件的元素引用在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
相关推荐
-
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
1.one()方法功能是为所选的元素绑定一个仅触发一次的处理函数,其调用的语法格式为:one(type, [data], fn) 其中参数type为事件类型,即需要触发什么类型的事件:参数data为可选参数,表示作为event.data属性值传递给事件对象的额外数据对象:fn为绑定事件时所要触发的函数. 2.示例代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h
-
浅谈jquery事件处理
在以jQuery为基础库的前端开发体系中,经常会在一个页面上通过各种标识绑定许许多多的事件.就算简单的使用了事件代理,也还是造成了事件的分散,不好维护和管理. 那么,如何解决这个问题呢?而我,想到了backbone中的events.如下: 复制代码 代码如下: events: { "click .icon": "open", "click .button.edit": "openEditDialog
-
jQuery使用手册之 事件处理
hover(Function, Function) 当鼠标move over时触发第一个function,当鼠标move out时触发第二个function样式:<style>.red{color:#FF0000}</style>Html代码: <div id="a">sdf</div>jQuery代码及效果 $(function(){ $("#a").hover(function(){$(this).addC
-
jQuery的实现原理的模拟代码 -3 事件处理
在对象的私有扩展对象上,专门增加了一个名为 events 的事件管理对象,在这个对象上每种事件分别对应一个同名的属性,这个属性的值是一个数组,针对这个事件的处理程序依次压入这个数组中,构成一个事件处理的列表.自定义的事件处理函数即被压入这个列表中. 在事件触发的时候,通过注册的匿名函数来执行 jQuery.event.handle ,由于使用了闭包,所以在这个函数中的 this 就是事件源对象,通过这个事件源对象找到对象的私有扩展数据,然后在 events 中找到对应的事件处理程序列表,最后,依
-
jQuery动态添加的元素绑定事件处理函数代码
我当时的处理方法是在添加的时候手工绑定事件处理函数.不过新版的jquery已经添加了这个功能.我们已经不需要为此烦恼了. 参考:http://api.jquery.com/live/ 以前我们定义事件,比如为元素定义单击事件是这样写的: 复制代码 代码如下: $('input').click(function () { //处理代码 }); 或 复制代码 代码如下: $('.clickme').bind('click', function() { // Bound handler called.
-
jquery中的事件处理详细介绍
1.页面载入完毕响应事件 所谓页面载入完毕是指DOM元素载入就绪了,能够被读取和操作了. ①jQuery中的$(doucument).ready()事件 ready(fn)是jQuery事件模块中最重要的一个函数.这个方法可以看作是对window.onload注册事件的替代方法.通过使用这个方法,可以在DOM载入就绪时立刻调用所绑定的函数,而几乎所有的javaScript函数都是需要在那一刻执行. ready(fn) 返回值:Object 参数-fn:要在DOM载入就绪时执行的参数Functio
-
JQuery入门——用bind方法绑定事件处理函数应用介绍
1.bind()功能是为每个选择元素的事件绑定处理函数,其语法如下:bind(type, [data], fn) 其中type为一个或多个类型的字符串,如click或change,也可以自定义:可以被type调用的类型包括blur.focus.load.resize.scroll.unload.click.dbclick.mousedown等事件.参数data是作为event.data属性值传递对象的额外数据对象.参数fn是绑定到每个选择元素的事件中的处理函数. 2.示例代码: 复制代码 代码如
-
利用jQuery的$.event.fix函数统一浏览器event事件处理
比如得到触发事件的元素引用在IE浏览器下是:event.srcElement,在FF浏览器下则是:event.target,另外又比如在FF浏览器下得到光标相对页面的位置是event.pageX,而IE浏览器下的处理方式又是不一样的,当然还有一些像"阻止事件冒泡"以及"取消浏览器默认行为"等,不同浏览器也有不同的处理方式,如果我们要使JavaScript在不同的浏览器下能正常处理事件代码,就要分别进行判断处理.现在jQuery为我们提供了统一兼容处理函数$.even
-
利用jQuery实现简单的拖曳效果实例代码
前言 本文主要给大家介绍了一种利用jQuery实现的简单拖曳效果,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 提出问题 如何实现将一个盒子里的元素拉到另外一个盒子里? 实现思路 此操作包含的事件有 mousedown mousemove mouseup ,对这三个事件进行监听并进行相应的操作. 操作设计的节点有:原节点,临时节点,新节点 节点的移动涉及事件e的坐标 操作元素使用JQUERY 代码实现 相应的注释在文中已有体现,请认真观看,你可以理解的. 先定义一个对象 dr
-
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
前言 最近在项目中使用了很多前端的东西,对于我一个做后台开发的人员,这是一个很好的锻炼的机会.经过这段时间的学习,感觉前端的东西太多了,太强大了,做出来的东西太炫酷了.现在有很多开源的前端框架,做的都非常的漂亮,h5发展了这么多年了,改变了互联网行业啊! 时间轴是一个按时间顺序描述一系列事件的很好方式,经常用在项目规划中.时间轴的典型方案通常设计成一个包含许多长条的带有数据标签的图形,当事件发生的时候则在这些长条的上方进行标记. 下面给大家介绍几款漂亮的时间轴,也许大家以后工作中会用到. 一.纵
-
在easyUI开发中，出现jquery.easyui.min.js函数库问题的解决办法
easyUI是jquery的一个插件,是民间的插件.easyUI使用起来很方便,里面有网页制作的最重要的三大方块:javascript代码.html代码和Css样式.我们在导入easyUI库后,可以直接复制粘贴里面的代码,从而简单轻便地初步设置网页. 首先导入easyUI函数库: <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
-
解决jQuery uploadify在非IE核心浏览器下无法上传
一.jquery uploadify自我介绍: (1).大家好,我是jquery插件大家族中负责实现异步上传的插件,我不是唯一,只是较好用的一款. (2).我的功能: 支持单文件或多文件上传,可控制并发上传的文件数 在服务器端支持各种语言与之配合使用,诸如PHP,.NET,Java-- 通过参数可配置上传文件类型及大小限制 通过参数可配置是否选择文件后自动上传 易于扩展,可控制每一步骤的回调函数(onSelect, onCancel--) 通过接口参数和CSS控制外观 Uploadify主页地址
-
不同的jQuery API来处理不同的浏览器事件
在今天的网络浏览器处理事件是有点困难的一部分,不同的浏览器以不同的方式处理事件.因此,要克服这些跨浏览器的问题,人们可以利用jQuery的事件处理API. jQuery是一个小的JavaScript库,提供了广大的API来处理不同的浏览器事件和效果和更大量.阅读更多有关处理使用JavaScript浏览器的用户界面效果.在本教程中,我们将探讨不同的API jQuery来处理不同的浏览器事件. Page Load事件 就绪(FN), 这是所有类型的事件,jQuery的支持的基础上.你可能想设置形式的
-
利用JQuery操作iframe父页面、子页面的元素和方法汇总
前言 iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,本文主要给大家分享了关于简单使用JQUERY来操作IFRAME的一些记录,这个使用纯JS也可以实现.下面话不多说了,来一起看看详细的介绍吧. 第一.在iframe中查找父页面元素的方法: $('#id', window.parent.document) 第二.在父页面中获取iframe中的元素方法: $(this).contents().find("#suggestBox") 第三.在iframe
-
利用jQuery实现可以编辑的表格
今天学习了利用jQuery实现可以编辑的表格这个例子.这个例子需求是这样的:在前台的表格中单击单元格便可修改其中的内容,回车键保存修改的内容,esc撤销保存的内容.原理:单击客户端表格单元格时,在单元格中添加一个文本框,并将单元格中原来的内容赋值给文本框,再进一步去修改文本框内容,修改后将文本框内容重新赋值给单元格. 源码: 前台代码: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeB
-
js 事件处理函数间的Event物件是否全等
这个小问题以前就遇到,却没有去总结 现在又遇到,为了得到准确结论,记录下来: 如题:同一事件 多个执行函数间的Event物件是否全等 例如: 复制代码 代码如下: dom.addEvent('click',fna); dom.addEvent('click',fnb); 1:在fna里对Event物件添加的属性,在其后执行的fnb函数里是对于Event物件是否能访问到? 2:执行fna/fnb函数时的Event物件是否全等 Eventfna===Eventfnb ? 标准的文档太长哪里是说明了这
-
jQuery实现的浮动层div浏览器居中显示效果
本文实例讲述了jQuery实现的浮动层div浏览器居中显示效果.分享给大家供大家参考,具体如下: 1.在页面的head中引入jQuery <script type="text/javascript" language="javascript" src="jquery-1.7.2.min.js"></script> 2.在页面的head中加入浮动层和遮罩层的样式 <style> #previewDiv{z-ind