PreventDefault and stopPropagation details in js
- 2020-03-30 01:29:33
- OfStack
First, explain the difference between the two methods of preventDefault and stopPropagation in js:
What does the preventDefault method do? We know things like < 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, which belongs to < A> The preventDefault method prevents the default behavior of a tag from happening and something else from happening. Take a look at some code:
<!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>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>
</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 baidu link, will not open http://www.baidu.com, but just pop up an alert dialog box.
So much for the preventDefault method, how about the stopPropagation method? Before we get to the stopPropagation method, we need to explain js's event broker.
The event broker USES two features that are often overlooked in javascript events: event bubbling and target elements. When an event is triggered on an element, such as a mouse click on a button, the same event will be triggered on all ancestors of that element. This process is called event bubbling; This event bubbles from the original element all the way 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 event proxies, we can add an event handler to an element, wait for the event to bubble up from its child elements, and easily figure out which element the event started from.
The stopPropagation method is to prevent the js event from bubbling, look at a piece of code.
<!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" lang="gb2312">
<head>
<title> stop JS Event bubbling ( cancelBubble , stopPropagation ) </title>
<meta name="keywords" content="JS, The event bubbling ,cancelBubble,stopPropagation" />
<script>
function doSomething (obj,evt) {
alert(obj.id);
var e=(evt)?evt:window.event;
if (window.event) {
e.cancelBubble=true;//Stop bubbling under ie
} else {
//e.preventDefault();
e.stopPropagation();//Prevent bubbling under other browsers
}
}
</script>
</head>
<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. Will bubble.</p>
</div>
<p>This is parent2 div.</p>
</div>
</body>
</HTML>
Just run the above code and you'll see.