Preventdefault in JS and stoppropagation detailed _javascript skills

Source: Internet
Author: User
Tags testlink

First, explain the difference in JS Preventdefault and stoppropagation two methods:
What is the effect of the Preventdefault method? We know such as <a href= "http://www.baidu.com" > Baidu </a>, this is the most basic HTML, the role is to click Baidu Link to http://www.baidu.com, which is <a> The default behavior of the label, and the Preventdefault method is something else that can prevent its default behavior from happening. Look at a piece of code and you'll see:

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>js Block link Jump </title>
<script type= "Text/javascript" >
function Stopdefault (e) {
if (e && e.preventdefault)
E.preventdefault ();
Else
Window.event.returnValue = false;

return false;
}
</script>
<body>
<a href= "http://www.baidu.com" id= "Testlink" > Baidu </a>
<script type= "Text/javascript" >
var test = document.getElementById (' Testlink ');
Test.onclick = function (e) {
Alert (' My link address is: ' + This.href + ', but I will not jump. ');
Stopdefault (e);
}
</script>
</body>

At this point click Baidu Link, will not open http://www.baidu.com, but just pop-up an alert dialog box.

Preventdefault method to explain here, Stoppropagation method? Talk about the Stoppropagation method must first give you an explanation of JS event agent.

The event agent uses two features that are often ignored in JAVASCIPRT events: event bubbling and target elements. When an event on an element is triggered, such as when a mouse clicks on a button, the same event is triggered in all ancestor elements of that element. This process is called event bubbling; This event bubbles from the original element to the top of the DOM tree. For any event, the target element is the original element, which in our case is the button. The target element appears as an attribute in our event object. With the event agent, we can add an event handler to an element, wait for the event to bubble up from its child element, and easily determine which element the event starts from.

The Stoppropagation method is to prevent the JS event bubbling effect, look at a piece of code.

Copy Code code as follows:

<! DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xHTML1/DTD/xHTML1-transitional.dtd ">
<title> Block JS event bubbling (cancelbubble, stoppropagation) </title>
<meta name= "keywords" content= "JS, event bubbling, cancelbubble,stoppropagation"/>
<script>
function DoSomething (obj,evt) {
alert (obj.id);
var e= (evt) evt:window.event;
if (window.event) {
e.cancelbubble=true;//IE block bubbling
} else {
E.preventdefault ();
E.stoppropagation ()//stop Bubbling under other browsers
}
}
</script>
<body>
<div id= "Parent1" onclick= "alert (this.id)" style= "Width:250px;background-color:yellow" >
<p>this is Parent1 div.</p>
<div id= "Child1" onclick= "alert (this.id)" style= "Width:200px;background-color:orange" >
<p>this is child1.</p>
</div>
<p>this is Parent1 div.</p>
</div>
<br/>
<div id= "Parent2" onclick= "alert (this.id)" style= "Width:250px;background-color:cyan"; >
<p>this is Parent2 div.</p>
<div id= "child2" onclick= "dosomething (this,event);" style= "width:200px;background-color:lightblue;" >
<p>this is child2. Would bubble.</p>
</div>
<p>this is Parent2 div.</p>
</div>
</body>
</HTML>

Let's just run through the code above and see.

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.