I belive many of you have used return false for an click event to prevent from visiting link address of ‘#’, do you know what have been happened when you code return false?
Look at this demo:
$('a').click(function(){
# some code
return false;
});
It seems to have done the right job, but it is misused this time,do you know what happened behind the screen when you click the link?First, you got your goal, you have prevent to visiting the link,here it is the event.preventDefault() make the sense, other more, you have also prevent event.stopPropagation and the callback function below the return false.
So , it has greatly increase the brittleness of your code to use return false at this time.
If you just want to prevent the default behavior of your click event, you only need to preventDefault, the right usage:
$('a').click(function(event){
# some code
event.preventDefault();
});
That is the event.preventDefault(), but what is stopPropagation?
$('a').click(function(event){
event.preventDefault();
event.stopPropagation();
console.log('You have clicked the link.');
});
$('#demo').click(function(){
$(this).toggleClass('yellow');
console.log('You have clicked the demo div.');
});
The html is a div and inside it is a link address, with a yellow background class.You may find there is one line of event.stopPropagation(), the case you do not write this, when you click on the div or the link address, the div will be attach the yellow class, but with this line, when you click on the link address, the div will not change backgroud to yellow.It stops bubbling to the parent click event.
Another event here is event.stopImmediatePropagation:
$('a').click(function(event){
event.preventDefault();
console.log('Click on the link one time.');
});
$('a').click(function(event){
event.preventDefault();
event.stopImmediatePropagation();
console.log('Click on the link two time.');
});
$('a').click(function(event){
event.preventDefault();
console.log('Click on the link three time.');
});
$('a').click(function(event){
event.preventDefault();
console.log('Click on the link four time.');
});
Above example will print ‘Click on the link one time.’ and ‘Click on the link two time.’,the third and forth print will not occur.Your page may have many plugin or event for one element, you can use stopImmediatePropagation to not fire the next operation.
Here you know what is the difference in event.preventDefault() and event.stopPropagation and event.stopImmediatePropagation.But where should i put them in my code?
Acctually, the last two events can be put in any place in your callback function, but positon of event.preventDefault can be different.
$('a').click(function( event ){
event.preventDefault();
func(); // undefined function
});
// use both these two snippets
$('a').click(function( event ){
func(); // undefined function
event.preventDefault();
});
After exam it, you will find that the first snippet will not visit the ‘#’ address, and then appear the error,but the next snippet will visit the address with the error notice comes first.
Summary:Use the Right Method of event.preventDefault() and event.stopPropagation and event.stopImmediatePropagation for the Job!
