Use jQuery's $.event.fix function to unify browser event processing_jquery
WBOY
Release: 2016-05-16 18:38:43
Original
1129 people have browsed it
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
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; }
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