Return false; preventdefault (); stoppragation () in Javascript

Main content:

• Differences
• Code demo differences
• Suggestions

 

1. Differences

In normal coding, the [return false;] statement is often used in JavaScript to prevent the event from being passed up. In fact, the [return false;] statement contains two layers:

1. Block the default action of the element that triggers the event (for example, a link (<a href = "http: // www/Baidu.com"> </a> ), its default action is to migrate to the Baidu homepage)
2. Prevents trigger event elements from passing events up

 

Because [return false;] contains two meanings, we must first determine whether the above two blocks meet our expectations when using them.

If we misuse [return false;] When we only want to block the default action of an element or only want to prevent the event from being passed up,

In this case, it is difficult to debug problems in a large amount of code.

In JavaScript, the corresponding functions implement the above two blocks respectively:

1. Event. preventdefault () blocks the default action of the element that triggers the event
2. Event. stoppragation () prevents elements that trigger an event from passing events up

 

2. Differences in code demonstration

The following code demonstrates the differences between [return false;], [preventdefault ()], and [stoppragation ()] in five cases.

HTML code:

<! Doctype> 
 
Scenario 1, Do not use [return false;], [preventdefault ()], [stoppragation ()]
The default my. js code is as follows:
// init$(function(){    $("#parent").bind('click', fun_p);    $("#child").bind('click', fun_c);    $("#lnk").bind('click', fun_a);});function fun_p(){    alert('parent');}function fun_c(){    alert('child');}function fun_a(){    alert('link');}
Open the HTML file in the browser and click link ("go to Baidu! "), And perform the following operations in sequence:

 

 
  
Trigger the link Click EventAlert ('link ')
 
  
Upload the click event to the parent element Div (div with the ID of child) to trigger the click event of this Div.Alert ('child ')
 
  
Continue to pass the click event to the parent element Div (div with the ID of parent), and trigger the click event of this DivAlert ('parent ')
 
  
Execute the default action of link, that isMigrate to the Baidu Homepage

 
 
Case 2, Use [return false;]
Append a line to function fun_a in my. js [return false;]
function fun_a(){    alert('link');    return false;}
Open the HTML file in the browser and click link ("go to Baidu! "), And perform the following operations in sequence:
1. Trigger the link Click EventAlert ('link ')
Scenario 1 2 ~ Step 4 is blocked
 
Case 3, Use [preventdefault ()]
Append a line to function fun_a in my. js [event. preventdefault ()]
function fun_a(){    alert('link');    event.preventDefault();}
Open the HTML file in the browser and click link ("go to Baidu! "), And perform the following operations in sequence:

 

 
  
Trigger the link Click EventAlert ('link ')
 
  
Upload the click event to the parent element Div (div with the ID of child) to trigger the click event of this Div.Alert ('child ')
 
  
Continue to pass the click event to the parent element Div (div with the ID of parent), and trigger the click event of this DivAlert ('parent ')

 
The default link action is blocked by the function [preventdefault ()].
 
Case 4, Use [stoppragation ()]
Append a line to function fun_a in my. js [event. stoppragation ()]
function fun_a(){    alert('link');    event.stopPropagation();}
Open the HTML file in the browser and click link ("go to Baidu! "), And perform the following operations in sequence:

 

 
  
Trigger the link Click EventAlert ('link ')
 
  
Execute the default action of link, that isMigrate to the Baidu Homepage

 
The event passed up is blocked by the function [stoppragation ()].
 
Case 5Use both [preventdefault ()] and [stoppragation ()]
Append two rows to function fun_a in my. JS: [event. preventdefault ()] and [event. stoppragation ()]
function fun_a(){    alert('link');    event.preventDefault();    event.stopPropagation();}
Open the HTML file in the browser and click link ("go to Baidu! "), And perform the following operations in sequence:
Trigger the link Click EventAlert ('link ')
Same as case 2[Return false;] includes the [preventdefault] and [stoppragation] functions.
 
3. Suggestions
We recommend that you use the [preventdefault] and [stoppragation] functions whenever possible,
Even if [return false;] is used, [preventdefault] and [stoppragation] can be used in case 5 above.
In this way, the meaning of the Code is clearer and the readability is better.