I'm trying to detect an Enter key press event when a button has been clicked.
I'm new in javascript and don't know the good way to go...

HTML:

<div id="div"> Only execute javascript on click, not enter key press </div>

JAVASCRIPT:

$("#div").click(function () {

   /* IF ENTER KEY PRESSED, RETURN FALSE */

   $("#div").keypress(
    function(event){
     if (event.which == '13') {
        event.preventDefault();
        alert('clicked');
      }
   });

  /* Div has been clicked, continue code... */

});

This doesn't work...
Maybe there is a better way:

$("#div").MOUSE_CLICK_EVENT(function () {});

I'm trying to detect an Enter key press event when a button has been clicked.
I'm new in javascript and don't know the good way to go...

HTML:

<div id="div"> Only execute javascript on click, not enter key press </div>

JAVASCRIPT:

$("#div").click(function () {

   /* IF ENTER KEY PRESSED, RETURN FALSE */

   $("#div").keypress(
    function(event){
     if (event.which == '13') {
        event.preventDefault();
        alert('clicked');
      }
   });

  /* Div has been clicked, continue code... */

});

This doesn't work...
Maybe there is a better way:

$("#div").MOUSE_CLICK_EVENT(function () {});

• javascript
• html

• possible duplicate of jQuery trigger() and stopPropagation() on keydown event – Dalorzo Commented Aug 20, 2014 at 14:40
• Is it even possible to have a keypress on a non-input field? – putvande Commented Aug 20, 2014 at 14:40
• @putvande Of course it is, window, document, <button>, <a> links, anything with a tabIndex that gets focus... – skyline3000 Commented Aug 20, 2014 at 14:45
• Apparently yes... The div is inside a form. Maybe I should post more detailed code? – gr3g Commented Aug 20, 2014 at 14:46
• @skyline3000 alright, fair enough, but OP doesn't have tabindex on there. – putvande Commented Aug 20, 2014 at 14:47

4 Answers 4

You need to stopPropagation like:

$('#div').keydown(function(event){
  if (event.which == '13') {
    event.preventDefault();
    event.stopPropagation();
  }
});

stopPropagation: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

As others have noted, you need stopPropagation in addition to preventDefault, and you should be listening for the keydown event rather than keypress.

The pure JavaScript way to do this is:

document.getElementById('div').onkeydown = function (evt) {
    if (evt.which === 13) {
        evt.preventDefault();
        evt.stopPropagation();
        return false;
    }
};

document.getElementById('div').onclick = function (evt) {
    // do whatever you want here
};

try this if still needs anybody. Quick solution.

$("form").keypress(function(e) {
  //Enter key
   if (e.which == 13) {
   return false;
 }
});

Also you need to consider 3 key events: keydown, keypress and keyup.

    $("#ID").keydown (function (e) {
        if ( e.key == 'Enter') {
            e.preventDefault();
            e.stopPropagation();
            return false;
        }
    });

    $("#ID").keyup (function (e) {
        if (e.key  == 'Enter') {
           e.preventDefault();
           e.stopPropagation();
           return false;
        }
    });

    $("#ID").keypress (function (e) {
        if (e.key  == 'Enter') {
            e.preventDefault();
            e.stopPropagation();
            return false;
        }
    });