Prevent enter firing button click in Vue.js

Question

I am trying to sort out a user interface problem where an enter key pressed in an input field is effectively firing a click event on a button (presumably because it now has the focus). The button in question has a prevent modifier on its click action (i.e., <button @click.prevent="blah">), but that doesn't help. What I want to do is ensure that the button action is only executed by an actual click on the button, not by enter in a preceding input field.

LATER: I have this working now using <a @click.prevent="blah"> instead, with the link styled as a button via Bootstrap. This doesn't have the problem - an Enter key doesn't fire the handler. It seems insane to me that there is no way of distinguishing between a mouse click on a button and the Enter key firing it. Both are seen as a MouseEvent, and I can find no way of differentiating between the two.

In your event handler, have you tried e.preventDefault()?

wilsonhobbs
– wilsonhobbs

2017-11-19 18:50:36 +00:00
Commented Nov 19, 2017 at 18:50 — wilsonhobbs
– wilsonhobbs, Commented Nov 19, 2017 at 18:50
Isn't that what @click.prevent does for me?

John Moore
– John Moore

2017-11-19 19:09:52 +00:00
Commented Nov 19, 2017 at 19:09 — John Moore
– John Moore, Commented Nov 19, 2017 at 19:09

John Moore · Accepted Answer · 2017-11-19 20:01:44Z

17

Actually, the answer was extraordinarily simple, but not immediately obvious. I was using plain <button>. I had forgotten to add what the type tag, which I normally would, thus: <button type="button"> Once this was in place, the Enter key no longer fired it.

answered Nov 19, 2017 at 20:01

John Moore

7,15916 gold badges56 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chris Leyva Over a year ago

Wow! I can't believe this was it. This had been killing me for so long! Thank you so much. I have never come across this before.

Carlos Mori Over a year ago

Same here, days looking for the answer!! thanks bro

C. Foust · Accepted Answer · 2020-04-28 00:19:35Z

2

What worked best for me was an empty @click.prevent="" in combination with @mousedown.prevent="myfunction".

This:

prevents the 'Enter' key from triggering a click
keeps the tag from receiving focus on click (except on keyboard navigation)
prevents page reload on any href="#"

My fiddle: https://jsfiddle.net/j8fchbvk/37/

answered Apr 28, 2020 at 0:19

C. Foust

314 bronze badges

Comments

Katinka Hesselink · Accepted Answer · 2018-07-23 14:15:49Z

0

In a similar situation I fixed it by getting rid of the <form> tag . Since Vuex was handling form-submission, I did not need the form tag anyhow.

answered Jul 23, 2018 at 14:15

Katinka Hesselink

4,2034 gold badges24 silver badges25 bronze badges

Collectives™ on Stack Overflow

Prevent enter firing button click in Vue.js

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related