'How to stop element with first onclick event to be fired when enter key is pressed first time

I was fixing a bug in a jsp page in which even though a function is defined with onkeypress event to click a particular button (actually its an image of button with onclick property associated with it) when the page is opened first time and then enter key is pressed its throwing an error.

When I debugged the code then I find out that actually two calls are made simultaneously. i.e. the first button with onclick property is also clicked.

Here is just a sample code: 

<html>
<head>
</head>
<body>
<div onkeypress =handleEnter()>
name <input  type="text" src='Create.gif' >
</br>
<input  type="image" src='Create.gif' onclick="alert('not done')">
<input  type="image" src='Create.gif' onclick="alert('done')">
</div>
</body>
<script>
function handleEnter()
{
if(window.event.keyCode==13)
{
alert('nothing');
event.cancelBubble=true;
}
}
</script>
</html>

on pressing enter key both functions are getting called.

javascripthtmlinternet-explorer-8dom-events


Solution 1:[1]

The following will probably work. By preventing the default action of the keypress it should stop the browser from triggering the standard "form submit" — which is what I think is happening.

function handleEnter(e)
{
  e || (e = window.event); /// support for both ie and non-ie browsers
  if(e.keyCode==13)
  {
    alert('nothing');
    // old ie support
    e.cancelBubble = true;
    e.returnValue = false;
    // non-ie
    e.preventDefault && e.preventDefault();
    e.stopPropagation && e.stopPropagation();
  }
}

You have to bear in mind though that if you are preventing default for enter on the whole page, it will stop it working for textareas and other places where enter might be used. If this is a problem you could decide whether or not to prevent the default action depending on:

var elm = e.srcElement || e.target;

elm should contain the triggering element of the event. scrElement is for old IE and target is for non-IE browsers. For example, you could use this to shortcircuit your code before reaching the prevent default.

if ( elm.nodeName == 'textarea' ) return;

I don't have IE8 lying around to test this however, but considering the following link, it is likely to work:

http://support.microsoft.com/kb/298498

Solution 2:[2]

I know this is an old question, but I did not find any other questions/answers for this, and I was having this same issue with buttons.

But for some reason when I look at the "event" that is passed into javascript function, there is no keyCode passed in with it, so I can not distinguish which key was pressed. FYI "event" was only passing in isTrusted property (and nothing else), but that is another question for another time...

My solution was that I just added a button with onclick="return false;" and style="display:none;" in front of all the other elements so that the ENTER key affects this element and is essentially ignored, and is invisible. With onclick='return false;' the form will NOT be submitted. With onclick='return true;' the form WILL be submitted.

<button id='prevent-onclick-on-enter' style='display:none;' onclick='return false;'/>
<input  type="image" src='Create.gif' onclick="alert('not done')">
<input  type="image" src='Create.gif' onclick="alert('done')">

SECOND ANSWER So this is maybe for a slightly different issue that only involves BUTTONS (not INPUTS), but this may be good to know for some people (like me) that did not know this... When you have a button in a form, it defaults to type "submit" which means the first button in a form will have its onclick event triggered by the ENTER key. To prevent this from happening, simply assigm type="button" to the button, and enter key will no longer affect it.

Solution 3:[3]

as jsherk mentioned, any unintended onclick should have type="button" and will stop firing when enter is pressed

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3 Will

Related Questions