Stoppropagation, the difference between Preventdefault and return False

Because there is a parent, the child node is the same, because there are listening events and the browser default action points. It is often necessary to prevent events and actions from executing when using JavaScript in order to achieve the desired effect. Generally we will use three methods, respectively stopPropagation() , preventDefault() and return false . What is the difference between them and when to use them? This will be explained in this article.

Listen for the event, on the node can be monitored on the page operation. For example: The Change event for the Select node, the Click event of the A node.
Browser Default action , which refers to features on specific page elements. such as: Click on a link node jump action, form submission action.

Stoppropagation ()

Because events can be passed at various levels of nodes, whether bubbling or capturing, sometimes we want events to be passed after a particular node has finished executing, and you can use the event object's stopPropagation() methods.

Suppose there is a floating pop-up layer on the page that appears first, hiding the pop-up layer when you click outside the page area of the popup layer. To do this, we listen to documentElement the Click event, which hides the popup layer once the event is triggered. But ...

This obviously has a problem. When the user clicks on the popup layer, we don't want it to be hidden away. But because of the bubbling of events, documentElement the Click event is also triggered. At this point, we can listen for the click event of the popup layer and use the stopPropagation() method to prevent bubbling. Please refer to the code below.

When clicked on the pop-up dialog, no page action is made and the Bubbling document.getElementById (' dialog ') is blocked. onclick = function (ev) {ev.stoppropagation ();}; When you hear a click event on the DocumentElement node, hide the dialog box Document.documentElement.onclick = function (EV) {document.getElementById (' Dialog '). style.display = ' none ';};

stopPropagation()Quite good, but IE8 and previous versions are not supported. The event object for IE contains unique properties cancelBubble that can be prevented by assigning false to prevent the event from continuing. such as:

When clicked on the pop-up dialog, no page action is made and the Bubbling document.getElementById (' dialog ') is blocked. onclick = function (ev) {ev.cancelbubble = false;};

Preventdefault ()

A link code with an event listener is as follows:

<a href= "http://w3c.org" onclick= "alert (' JavaScript click Event ');" > Click links </a>

Click the link to display the dialog box after the jump page. It can be concluded that the browser default action is triggered in addition to the listener event. A listener event is executed before the default action of the browser is triggered.

Here's a classic example where we want to click the link to open the page in a new window, but don't want the current page to jump. You can use this time to preventDefault() block the browser default actions that will be performed later.

<a id= "link" href= "http://w3c.org" >w3c Home link </a> <script>//in a new window, open page document.getElementById (' Link '). onclick = function (EV) {//block browser Default action (page jump) Ev.preventdefault ();//open page in New window window.open (this.href);}; </script>

return False

Exit execution, return false after which all the triggering events and actions are not executed. Sometimes it return false can be used to replace stopPropagation() and preventDefault() , for example, we open a link above the new window examples, such as:

<a id= "link" href= "http://w3c.org" >w3c Home link </a> <script>//in a new window, open page document.getElementById (' Link '). onclick = function (EV) {//Opens the page in a new window window.open (THIS.HREF);//exit Execution (the browser default action executed after the listener event will not be executed) return false;}; </script>

Some people think that return false = stopPropagation() + preventDefault() , in fact, is wrong. return false not only to block events, but also to return objects, jump out of the loop, etc... Convenient one-size-fits-all and less flexible, misuse prone to error.

Stoppropagation, the difference between Preventdefault and return False