Vue: Event dispatching is not done in the right order?

Created on 29 Jul 2016  ·  3Comments  ·  Source: vuejs/vue

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.

Most helpful comment

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.

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.

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.

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

Was this page helpful?
0 / 5 - 0 ratings

Related issues

franciscolourenco picture franciscolourenco  ·  3Comments

seemsindie picture seemsindie  ·  3Comments

bfis picture bfis  ·  3Comments

paceband picture paceband  ·  3Comments

loki0609 picture loki0609  ·  3Comments