Event prevent default is not working

If you are working on key action with jquery and having problems on event.preventDefault is not working. Let’s me explain something simple to you.

event.preventDefault

As given example on docs, it shows us how it works on click action. For instances, prevent default action of anchor request the given url when clicked, action of submit button clicked to submit the form.
So far so good.

bind.( “keydown” , function( event ){ return false; } );

preventDefault is good but when it comes to key action such as enter key on submit form and tab key on switching the focus of input element. It lose it effects. You will found out that enter key are still performing default action and others key as well.
So… what is the solution? Adding return false on handler. Snippets below shows an simple example on this solution.

$(document).bind('keydown', function(e){  
  
 return false; 
 
}); 

It’s works right!

What happens if you want only ‘enter’ key to be prevent default action. Here’s the solution.

$(document).bind('keydown', function(e){  
 var keyPressed = ('which' in e) ? e.which : e.keyCode;
  
 if( keyPressed == 13){         
  return false;
 }else{
  return true;
 }
 
}); 

Enter keycode is 13. Return true on event handler will allow the key to continue with default action and return false will stop event handler from continue to default action.

It’s still not working

There are a few quite common mistake make by people, especially for me. Either you too?

• Errors inside the handler function

If there is errors (exp. syntax errors) occured inside the handler function, default action will be carry out even though there is return false in handler function. Don’t tried to ignore the errors that shows on your browser, it might be the core of your problems.

• Mess up with JQuery instances and native Javascript instances

What does it means? Check it out with the differences at following codes.

$("ul").children("li")[0].html("");
$("ul").children("li")[0].innerHTML = "";

It is quite tricky problems, html() is jquery properties and innerHTML is javascript properties. But on this case, children(“li”) returns native javascript element array, so there is no method for html(“”) in returned element array. So, second code is the correct answer.

If you have do some checking by Object.keys( $(“ul”).children(“li”)[0] ); you will found out that the properties is different from jquery properties.

 

Conclusions

High level language doesn’t means you don’t have to understand the basic of it. Understanding basic sometimes will be the helper on solving problems.

Good luck