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, 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 you click on the Pop-up dialog box, no page action is made and the bubbling document is blocked.getElementById(' Dialog ').OnClick=function(EV){ev.Stoppropagation();}; Hides the dialog document when the Click event is heard on the DocumentElement node. documentelement. onclick = Function (Ev{ Document. getelementbyid (). style. display = none ' ; } |
stoppropagation ()
is quite useful, but IE8 and previous versions are not supported. The event object for IE contains a unique property, cancelbubble
, that prevents 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 is blocked. getElementById(' dialog '). function(ev{ev). false;} ;
|
Preventdefault ()
A link code with an event listener is as follows:
<href=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=href= "http://w3c.org" >w3c Home link </A> <script>//in a new window, open the 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=href= "http://w3c.org" >w3c Home link </a> <script>//in a new window, open the page document.getElementById (' link '). onclick = function (EV) {//Opens page window.open (this.href) in a new window;//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.
Something
Because of the habit return false
of blocking events, recently in the mobile phone Web encounter some problems, it is embarrassing. Write down this article as a note and remind yourself.
Turn in original: http://www.neoease.com/stoppropagation-and-preventdefault-and-return-false/
Stoppropagation, the difference between Preventdefault and return False