Js_stoppropagation, 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, namely Stoppropagation (), Preventdefault () and return false. What is the difference between them and when should they be used? will be explained in this article.

Terms

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, we sometimes want events to be passed after a particular node has finished executing, and you can use the Stoppropagation () method of the event object.

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 the DocumentElement 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, the DocumentElement 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 you click on the Pop-up dialog box, no page action is made and the bubbling
document.getElementById (' dialog '). onclick = function (EV) {
Ev.stoppropagation ();
};

Hide the dialog box when you hear a click event on the DocumentElement node
Document.documentElement.onclick = function (EV) {
document.getElementById (' dialog '). style.display = ' None ';
};
Stoppropagation () is quite useful, but IE8 and previous versions are not supported. The event object for IE contains a unique attribute, cancelbubble, to prevent the event from continuing as long as it is assigned a value of false. Such as:

When you click on the Pop-up dialog box, no page action is made and the bubbling
document.getElementById (' dialog '). 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. This time you can use Preventdefault () to block the browser default actions that will be performed later.

<a id= "link" href= " http://w3c.org ">W3C Home Links </a>

<script>
In a new window, open the page
document.getElementById (' link '). onclick = function (EV) {
Block browser default actions (page jumps)
Ev.preventdefault ();
Open a page in a new window
window.open (THIS.HREF);
};
</script>
return False

Exit execution, all triggering events and actions after return false will not be executed. Sometimes return false can be used instead of stoppropagation () and Preventdefault (), such as the example of opening a link to a new window above us, such as:

<a id= "link" href= " http://w3c.org ">W3C Home Links </a>

<script>
In a new window, open the page
document.getElementById (' link '). onclick = function (EV) {
Open a page in a new window
window.open (THIS.HREF);
Exit Execution (browser default actions that are performed after a listener event will not be executed)
return false;
};
</script>
Some people think that return false = Stoppropagation () + Preventdefault (), is actually wrong. Return false not only blocks events, but also returns objects, jumps out of loops, etc... Convenient one-size-fits-all and less flexible, misuse prone to error.

Something

Because of the habit of using return false to prevent events, recently in the mobile phone Web encounter some problems, it is embarrassing. Write down this article as a note and remind yourself.

Js_stoppropagation, Preventdefault and return False