Unscramble the execution order _javascript techniques of JScript and href under IE and Firefox

Source: Internet
Author: User

It's been a long time since I wrote articles about code. The main reason is because the recent work has focused on the needs analysis, without the real feelings, there is no motivation to write. Discusses a question about the order in which JScript executes. The sample code is as follows:
A.htm
<a onmouseup= "func (' onmouseup ')" href= "b.htm" >click me!</a> <a onclick= "Func2 (' onclick ')" href= "d.htm ">click me!</a> <span id=msg></span>
<SCRIPT>
function func (str)
{
MSG (str);
Window.location.href= "c.htm";
}
function msg (str)
{
document.getElementById ("msg"). Innertext=str; A
alert (str); B
}
function Func2 (str)
{
MSG (str);
Window.location.href= "e.htm";
}
</SCRIPT>
MSG (STR) has an annotated line, which performs a and b respectively when experimenting.

A B
OnMouseUp OnClick OnMouseUp OnClick
Ie b.htm d.htm c.htm d.htm
FireFox c.htm->b.htm e.htm->d.htm c.htm->b.htm e.htm->d.htm

The table above lists the order of execution in the two browsers, red represents the page where the page script jumps, and blue is the href attribute of the anchor tag. As you can see from the above, for Firefox, always first execute the page script, and then the browser to jump. In IE, the process of execution is different:
1, use the Back button directly back to a.htm, that is, the page only executed a jump;
2, in the case of using alert interrupt, OnMouseUp executes the jump in the page script.

As can be seen from the above,
1, for Firefox, page script execution order always takes precedence over the browser inline script execution order, this already very obvious.
2, in IE, the order of execution of HREF is onmouseup->href->onclick. Are you sure?

To further define the order of execution in 2, we continue to analyze the execution order relationships of the onclick and href. In the above example, the onclick is implemented in the form of a transfer. If a. We use the following test code:
<a href= "d.htm" onclick= "return false;" >click me!</a>
found that href could not be executed.
B. If we use the following test code:
<a href= "d.htm" onclick= "window.location.href= ' e.htm '; return false;" >click me!</a>
The discovery still executes the d.htm of href, not the e.htm in the onclick.
C. If we use the following test code:
<a href= "d.htm" onclick= "msg" (' onclick '); >click me!</a>(function msg () code as above)
Discovery performs function msg (), while href is not triggered.

Dizzy. IE is indeed a strange thing. Who can help explain the phenomenon in B case?

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.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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