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

2016-02-19 14:35 7 1 收藏

今天图老师小编给大家精心推荐个利用jQuery的$.event.fix函数统一浏览器event事件处理教程,一起来看看过程究竟如何进行吧!喜欢还请点个赞哦~

【 tulaoshi.com - 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=utf-8" /
title利用jQuery的$.event.fix函数统一浏览器event处理/title
script type="text/javascript" src="http://img.poluoluo.com/jslib/jquery/jquery.js"/script
/head
body
input type="button" value="http://wwww.poluoluo.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

来源:http://www.tulaoshi.com/n/20160219/1607304.html

延伸阅读
标签: Web开发
onMouseWheel Event Sample-www.51windows.Net onmousewheel event This sample uses the onmousewheel event to expand or contract the picture below. Move the cursor over the picture and roll the mouse wheel up and down. Size = 100% http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/onmou...
标签: Web开发
window.event对象 event代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等。 event对象只在事件发生的过程中才有效。 event的某些属性只对特定的事件有意义。比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。 例子 下面的例子检查鼠标是否在链接上单击,并且,如果shift...
标签: Web开发
初学Javascript时写的一个判断浏览器类型的函数(类),不是很完善,不过毕竟第一次写东东,纪念一下! Get Exact Browser Type [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
标签: Web开发
作者:泣红亭   在上一篇文章《面向事件驱动的编程》中我讲了三种将事件绑定到元素的方法,而推荐使用第三种方法,即使用attachEvent/addEventListener来绑定.上一篇文章的主旨是告诉大家如何使用事件,而这一篇文章的主旨是让大家弄懂如何灵活应用事件来批处理某一类的对象行为. 首先讲一讲事件传递的概念.什么是事件传递?举个现实的例子,...
标签: 浏览器
1、首先,找到系统存放颜色配置文件的路径:c:windowssystem32spooldriverscolor 为winxp指定颜色配置文件,请看图示: 2、设置ps颜色配置: 3、设置coreldrawx3或x4的颜色配置(执行[工具][颜色管理]): 4、如果你仍在使用coreldraw9.0的话,请如下设置配置文件:

经验教程

269

收藏

20
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部