event.preventDefault()

Categories: Events > Event Object

event.preventDefault() Returns: undefined

Description: If this method is called, the default action of the event will not be triggered.

version added: 1.0event.preventDefault()

For example, clicked anchors will not take the browser to a new URL. We can use event.isDefaultPrevented() to determine if this method has been called by an event handler that was triggered by this event.

Example:

Cancel the default action (navigation) of the click.

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
	
<a href="http://jquery.com">default click action is prevented</a>
<div id="log"></div>

<script>
$("a").click(function(event) {
  event.preventDefault();
  $('<div/>')
    .append('default ' + event.type + ' prevented')
    .appendTo('#log');
});
</script>
</body>
</html>

Demo:

Comments

Support requests, bug reports, and off-topic comments will be deleted without warning.
Please do post corrections or additional examples for event.preventDefault() below. We aim to quickly move corrections into the documentation.
If you need help, post at the forums or in the #jquery IRC channel.
Report bugs on the bug tracker or the jQuery Forum.
Discussions about the API specifically should be addressed in the Developing jQuery Core forum.

Champs

@Onur: one advantage of preventDefault() is that it can be called anywhere, not just at exit. Any errors caused by your handler after making that call will appear in the browser's console and not be cleared away when it navigates to the next page. Firebug has persistence now, but that's not a universal feature.

Banning Stuckey

I'm using this to disable keydown scroll
$(document).keydown(function(event){
// Move Down
if(event.keyCode == '40'){
event.preventDefault();
var posY = $('#'+selectedTxtID).css('top');
posY = parseFloat(posY);
var newPosY = posY + 1;
$('#'+selectedTxtID).css('top', newPosY+'px');
}
})

It works in all browsers EXCEPT Opera... though Opera isn't a big deal I can't help but to want it to work in all browsers LOL...

Quentin

Try to use keypress event. preventDefault() works in keypress in Opera, too.

banningstuckey

Yes i had to add copy and paste all events under keydown and put them in keypress also to make up for Opera's lack of recognizing keydown... however i need keydown also because, i believe IE didn't recognize keypress... I can't remember now im to far along in my project LOL.. anyway issue was resolved by using keypress & keydown

EDIT: It looks like opera recognizes the arrow keys for scrolling the browser window on keypress and not keydown like all the others. So opera is seeing keydown BUT NOT for scrolling the browser window, thats keypress

Onur

what is the difference between using preventDefault and return false? the code produces same behaviour if we replace it like this:

$('<div/>')
.append('default ' + event.type + ' prevented')
.appendTo('#log');
return false;

The Feeblizer

According to John Resig:
return false does e.preventDefault() and e.stopPropagation()

jQuery API