Home  >  Article  >  Web Front-end  >  Use jQuery's $.event.fix function to unify browser event processing_jquery

Use jQuery's $.event.fix function to unify browser event processing_jquery

WBOY
WBOYOriginal
2016-05-16 18:38:431087browse

For example, the element reference that triggers the event is: event.srcElement in IE browser, and event.target in FF browser. In addition, the position of the cursor relative to the page in FF browser is event.pageX, and The processing methods under IE browser are different. Of course, there are also some methods such as "preventing event bubbling" and "cancel browser default behavior". Different browsers also have different processing methods. If we want to make JavaScript work in different If the event code can be processed normally under the browser, it must be judged and processed separately. Now jQuery provides us with a unified compatibility processing function $.event.fix(e). This function does not officially explain its usage in the document. I found out that it can be used in this way when reading the framework code.
1. How to use
Using jQuery's event compatible processing is mainly divided into the following simple steps:
1. Reference the jQuery framework library file in the head area of ​​the web page;
2. Define an event processing method , uniformly pass in the event parameters at the call place;
3. First use $.event.fix inside the event method to convert the old event into a new event reference;
4. Use it after the event method after compatibility Processed event object methods and properties.
2. Usage example

Copy code The code is as follows:





Use jQuery's $.event.fix function to unify browser event processing






< ;/html>

3. jQuery $.event.fix method definition original code reference
Copy code The code is as follows:

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
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn