Home > Others

Use jquery's $. event. Fix function to unify browser event processing

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

For example, if the element reference of the trigger event is in IE browser: event. srcelement: event.tar get in the FF browser. For example, in the FF browser, the position of the cursor relative to the page is event. pagex, and the processing methods in IE browser are different. Of course, there are also some examples such as "blocking event bubbling" and "canceling default browser behavior". Different browsers also have different processing methods, if we want JavaScript to handle events properly in different browsers Code , Respectively. Now jquery provides us with a unified and compatible processing function $. event. fix (e). This function is not officially described in this document. It can be used when I read the Framework Code.
I. How to Use
The event compatibility Processing Using jquery involves the following simple steps:
1. Reference The jquery Framework library file in the header area of the webpage;
2. Define an event processing method and pass the event parameters in the called place;
3. Use $. event. Fix to convert the old event into a new event reference;
4. Use the method and attribute of the event object after compatible processing after the event method.
Ii. Example Copy code The Code is as follows: <! 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> Use jquery's $. event. Fix function to unify browser event processing </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">
// Use different browsers to test this page. You will see the same result.
Function eventhandler (E)
{
VaR event = $. event. Fix (E );
VaR ELEM = event.tar get;
Alert ('the Tag Name of the currently clicked object is: '+ ELEM. tagname );
Alert ('the current button text is: '+ ELEM. value );
Alert ('pagex: '+ event. pagex +', Pagey: '+ event. Pagey );
// Obtain the key code
Event. keycode
// Cancel the default browser behavior
Event. preventdefault ();
// Cancel event bubbling
Event. stoppropagation ();
//... Some other attributes that are not frequently used are not listed here
}
</SCRIPT>
</Body>
</Html>

Iii. jquery $. event. Fix Method Definition source code referenceCopy 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 parameter button cancelable charcode contains invalid currenttarget data detail eventphase fromelement handler keycode implements newvalue when pagex Pagey prevvalue contains invalid parameter srcelement target timestamp toelement type view wheelwhdelta ich ". split ("");
For (VAR I = props. length; 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.tar get)
Event.tar get = event. srcelement | document; // fixes #1925 where srcelement might not be defined either
// Check if target is a textnode (Safari)
If (event.tar get. nodetype = 3)
Event.tar get = event.tar get. parentnode;
// Add relatedtarget, if necessary
If (! Event. relatedtarget & event. fromelement)
Event. relatedtarget = event. fromelement = event.tar get? Event. toelement: event. fromelement;
// Calculate pagex/y if missing and clientx/y available
If (event. pagex = NULL & event. clientx! = NULL)
{
VaR Doc = document.doc umentelement, 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;
}

Author: webflash
Source: http://webflash.cnblogs.com

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
tibco event processing event how to call javascript function in php without any event iis log to event viewer powershell write to event log write event to system log event callback

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More