Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Event dispatching is not done in the right order? #3350

Closed
julianxhokaxhiu opened this issue Jul 29, 2016 · 3 comments
Closed

Event dispatching is not done in the right order? #3350

julianxhokaxhiu opened this issue Jul 29, 2016 · 3 comments

Comments

@julianxhokaxhiu
Copy link

julianxhokaxhiu commented Jul 29, 2016

Vue.js version

1.0.26

Reproduction Link

http://codepen.io/anon/pen/akjNbW

Steps to reproduce

  1. Click on the input
  2. 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.

@dottorblaster
Copy link

dottorblaster commented Jul 29, 2016

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.

@simplesmiler
Copy link
Member

simplesmiler commented Jul 29, 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.

@julianxhokaxhiu
Copy link
Author

julianxhokaxhiu commented Jul 29, 2016

mousedown event is enough I think, thank you very much @simplesmiler !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants