jQuery API

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:

Support and Contributions

Need help with event.preventDefault() or have a question about it? Visit the jQuery Forum or the #jquery channel on irc.freenode.net.

Think you've discovered a jQuery bug related to event.preventDefault()? Report it to the jQuery core team.

Found a problem with this documentation? Report it on the GitHub issue tracker

  • http://www.lugatitturk.com/ Onur

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

    $(”)
    .append(‘default ‘ + event.type + ‘ prevented’)
    .appendTo(‘#log’);
    return false;

  • 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.

      • Anonymous

        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

        • Anonymous

          You mention doing a copy-paste to duplicate the keydown handler for keypress. If both handlers do exactly the same thing you can use the .bind() method to list several events at once as follows:

          $(document).bind(“keydown keypress”, function(event) {
          // your code
          });

          (P.S. Opera’s use of the keyboard is just weird, even without scripting issues, e.g., the tab key doesn’t go to A elements.)

          • Aravind

            My webpage has scrollbars. When I make custom operation using $(document).bind(“keydown keypress”, function(event), it does not stop the scrolling. Its a kinda wierd to look. I tried all return false , e.preventDefault() and e.stopPropagation()..nothing works.

          • http://profiles.yahoo.com/u/G462H6NWVZIDKQJOYZL3CGCXBE Banning

            If you’re using $(document).bind(“keydown keypress”, function(event) then e.preventDefault() won’t work try.. event.preventDefault()

          • Shivakumar Raju

            its nice..

  • 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.

    • Qqq

      qqq

  • Thonixx

    Hello..

    I'm using this feature for preventing my form of submitting. After that I made something with Javascript but after this I wanted my form submitting. But that doesn't work because I have the preventing feature in the code.

    How can I prevent the element for submitting for only a defined time?
    Or how can I make only a delay by the default action of the form element, so that the default function has a delay from aproximate one or two seconds?

    • http://www.learningjquery.com/ Karl Swedberg

      You could do something like this:

      $('#myform').submit(function(event) {
      event.preventDefault();
      var self = this;
      window.setTimeout(function() {
      self.submit();
      }, 2000);
      });

      • Ingvi101

        hi, Im trying to do the same thing but with a navigation link (anchor) instead of submiting a form.
        So first I want to disable the link, perform a little effect (slideUp) and then actually go to the link, can you/someone help me out?

        $('ul#nav li a').bind({
        click : function(event){
        event.preventDefault();
        $('ul ul').slideUp(1000);
        // ??
        }
        });

        • http://white-tiger.ch Thonixx

          my script as solution for ur problem:

          $(“#ELEMENT_WHICH_AFFECT_THE_SLIDEUP”)

          .click(function(event){

          event.preventDefault(); // prevents link to be redirected

          var time = 1000; // time for slideup effect

          var url = $(this).attr(“href”); // pick url for redirecting via javascript

          $(“#ELEMENT_TO_SLIDE_UP”).slideUp(time); // effect

          window.setTimeout(function(){document.location.href=url;}, time); // timeout and waiting until effect is complete

          return -1;

          });

          Look here to see the effect working: http://white-tiger.ch

  • Aronmeza

    the finall goal, its to prevent somone to put other tihng beside numbers.
    this is my js:
    http://jsfiddle.net/YzfnH/1/
    you can see the js, and work with it, and the problem is you can type shift+(number) any number and i dont now how to prevent that, and other problem is with the event.keyCode = 222, because i use preventDefault() to prevent de keydown, but, it is not working.
    tnks alot. i hope you can help me!.

  • Aronmeza

    the finall goal, its to prevent somone to put other tihng beside numbers.
    this is my js:
    http://jsfiddle.net/YzfnH/1/
    you can see the js, and work with it, and the problem is you can type shift+(number) any number and i dont now how to prevent that, and other problem is with the event.keyCode = 222, because i use preventDefault() to prevent de keydown, but, it is not working.
    tnks alot. i hope you can help me!.

  • Vlad Savitsky

    preventDefault() cant be used with .unload() event.

    • Aaa

      fghfhfdhdfhfrgh

  • Rohit

    i thnk, it's great. Also see this one http://javascript-guru.blogspo…

  • Mayur Tendulkar

    I'm using dialog and want to prevent it from hiding until and unless user is validated through web service once he clicks on login button. The other button is cancel. Can I use this method in this case?

  • Mbu725

    I wanted to prevent the context menu from being shown when the user clicks the right mouse button using :

    if(event.button == 2)
    event.preventDefault();

    But it doesn't work.