javascript avoid enter key press

Question

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 () {});

possible duplicate of [jQuery trigger() and stopPropagation() on keydown event](http://stackoverflow.com/questions/12730657/jquery-trigger-and-stoppropagation-on-keydown-event) — Dalorzo, Aug 20 '14 at 14:40
Is it even possible to have a keypress on a non-input field? — putvande, Aug 20 '14 at 14:40
Apparently yes... The div is inside a form. Maybe I should post more detailed code? — gr3g, Aug 20 '14 at 14:46
@skyline3000 alright, fair enough, but OP doesn't have `tabindex` on there. — putvande, Aug 20 '14 at 14:47

score 3 · Answer 1 · answered Aug 20 '14 at 14:37

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.

score 2 · Accepted Answer · answered Aug 20 '14 at 15:03

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
};

score 0 · Answer 3 · answered Aug 05 '20 at 22:59

0

try this if still needs anybody. Quick solution.

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

answered Aug 05 '20 at 22:59

Sodik Abdullaev

158
4
12

score 0 · Answer 4 · answered Feb 15 '23 at 14:56

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;
        }
    });

javascript avoid enter key press

4 Answers4

Linked