First, let’s explain the difference between preventDefault and stopPropagation methods in js:
What is the role of preventDefault method? We know that for example, <a href="">Baidu</a>, this is the most basic thing in html. Its function is to click on Baidu to link to. This is the default behavior of the <a> tag, and the preventDefault method can prevent its default behavior from happening and other things happening. After reading a piece of code, you will understand:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS blocks link jump</title>
<script type="text/javascript">
function stopDefault( e ) {
if ( e && )
();
else
= false;
return false;
}
</script>
</head>
<body>
<a href="" >Baidu</a>
<script type="text/javascript">
var test = ('testLink');
= function(e) {
alert('My link address is: ' + + ', but I won't jump.');
stopDefault(e);
}
</script>
</body>
</html>
Clicking on Baidu link at this time will not open, but an alert dialog box will just pop up.
This is explained by preventDefault method, what about stopPropagation method? Before talking about the stopPropagation method, you must first explain to you the event proxy of js.
The event proxy uses two features that are often ignored in JavaSciprt events: event bubbles and target elements. When an event on an element is triggered, for example, the mouse clicks a button, the same event will be triggered among all the ancestor elements of that element. This process is called event bubble; this event bubbles from the original element to the top of the DOM tree. For any event, its target element is the original element, which is the button in our example. The target element It appears in our event object as an attribute. Using event proxy, we can add the event processor to an element, wait for the event to bubble up from its child element, and it can easily determine which element the event starts from.
The stopPropagation method is to prevent the bubbling of js events, read a piece of code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xHTML1/DTD/">
<HTML XMLns="http:///1999/xHTML" lang="gb2312">
<head>
<title> Prevent the JS event from bubble passing (cancelBubble, stopPropagation)</title>
<meta name="keywords" content="JS, event bubble, cancelBubble, stopPropagation" />
<script>
function doSomething (obj,evt) {
alert();
var e=(evt)?evt:;
if () {
=true;// stop bubbles under ie
} else {
//();
();// Block bubbles in other browsers
}
}
</script>
</head>
<body>
<div onclick="alert()" style="width:250px;background-color:yellow">
<p>This is parent1 div.</p>
<div onclick="alert()" style="width:200px;background-color:orange">
<p>This is child1.</p>
</div>
<p>This is parent1 div.</p>
</div>
<br />
<div onclick="alert()" style="width:250px;background-color:cyan;">
<p>This is parent2 div.</p>
<div onclick="doSomething(this,event);" style="width:200px;background-color:lightblue;">
<p>This is child2. Will bubble.</p>
</div>
<p>This is parent2 div.</p>
</div>
</body>
</HTML>
Everyone will understand after running the above code.