Vue: Event dispatching is not done in the right order?
Vue.js version
1.0.26
Reproduction Link
http://codepen.io/anon/pen/akjNbW
Steps to reproduce
- Click on the input
- Try to click the button
What is Expected?
A click event to be fired, and then the blur to continue.
What is actually happening?
A blur event is called and the click event is disposed.
I have no really idea if this is related to Vue or how the Browser handles the event delegations. Although I tested this with Firefox, Chrome, IE and Edge, they ALL behaviored the same.
Any clue would be highly appreciated.
Thanks in advance.
julianxhokaxhiu
All 3 comments
This is an interesting question.
I think the click-related keydown triggers the blur on the input even before that the click event is fired.
Tricky.
dottorblaster
on 29 Jul 2016
This is a standard behavior of the browser. You might want to listen for the mousedown event instead.
A proper way would be to use more complicated logic:
- Give the button a moment to disappear after the input blur.
- Force the button to be visible if the button itself is focused.
simplesmiler
on 29 Jul 2016
mousedown event is enough I think, thank you very much @simplesmiler !
julianxhokaxhiu
on 29 Jul 2016
Related issues
bfis
·
3Comments
franciscolourenco
·
3Comments
fergaldoyle
·
3Comments
robertleeplummerjr
·
3Comments
finico
·
3Comments
Most helpful comment
This is a standard behavior of the browser. You might want to listen for the
mousedownevent instead.A proper way would be to use more complicated logic: