First explain the difference between the two methods of Preventdefault and StopPropagation in JS:
What is the role of the PreventDefault method? We know, for example, <a href = "http://www.baidu.com"> Baidu </a>, this is the most basic thing in html. The role is to click Baidu link to http://www.baidu. COM, this is the default behavior of the <a> label, and the PreventdeFault method is to prevent other things from occurring its default behavior. See a paragraph of code and everyone understands:
Copy code code as follows:
<! Doctype HTML PUBLIC "-// W3C // DTD XHTML 1.0 Transitional // EN" http://www.w3.org/xhtml1/dtddml1-transitationAl.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" /> />
<Title> JS Prevent link jumping </Title>
<script type = "text/javascript">
Function Stopdefault (E) {
if (E && E.PreventDefault)
e.Preventdefault ();
else
window.event.returnValue = false;
Return false;
}
</script>
</head>
<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 won't jump.');
stopdefault (e);
}
</script>
</body>
</html>
At this time, click on Baidu link, and you will not open http://www.baidu.com, but just pop up a Alert dialog box.
What about the Stoppropagation method? Before talking about the Stoppropagation method, you must explain to you the JS event agent.
Event proxies use two features that are often ignored in the JavaSciprt incident: event bubbling and target elements. When an event on an element is triggered, for example, the mouse clicks a button, and the same event will be triggered in all the ancestors of that element. This process is called incident bubbling; this incident has been bubbling to the top of the DOM tree from the original elements. For any event, its target elements are primitive elements, and in our example, but also the button. The target element appears in the form of attributes in our event objects. If you use an event agent, we can add the event processor to an element, wait for the event to bubble from its sub -level elements, and can easily determine which element the event starts from.
The Stoppropagation method is to prevent the js event from bubbling and see a code.
Copy code code as follows:
<! Doctype HTML PUBLIC "-// W3C // DTD XHTML 1.0 Transitional // EN" http://www.w3.org/xhtml1/dtddml1-transitationAl.dtd ">
<Html xmlns = "http://www.w3.org/1999/xhtml" lang = "gb2312">
<head>
<Title> Prevent JS incident bubble transmission (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 Under the IE to prevent bubbling
} Else {
//e.preventdefault ();
e.Stoppropagation (); // Under other browsers to prevent bubbling
}
}
</script>
</head>
<body>
<div ID = "Parent1" onClick = "Alert (this.id)">
<p> This is pain1 div. </p>
<div ID = "Child1" onClick = "Alert (this.id)">
<p> this is child1. </p>
</div>
<p> This is pain1 div. </p>
</div>
<br />
<div ID = "Parent2" onClick = "Alert (this.id)">
<p> This is parent2 div. </p>
<div ID = "child2" onClick = "dosomething (this, event);">> ">
<p> this is child2. Will bubble. </p>
</div>
<p> This is parent2 div. </p>
</div>
</body>
</Html>
Let's understand the code above.