LoginSignup
3

More than 5 years have passed since last update.

Javascriptのクリック系イベントの発動順序まとめ

Posted at

Javascriptでonclickやonblur等の発動順序をまとめます。
細かいことのようですが、覚えて置くと意外と役に立ちます。

結論

下記のような順序で発動します。

順番 イベント名
1 onmousedown
2 onblur
3 onmouseup
4 onclick

例えば、テキストフィールドでメールアドレスサジェストのUIを自作したとします。挙動としては下記のようになってほしい。
- 選択したサジェストのオプションをテキストフィールドの値に反映し、サジェストのリストを消す
- サジェストのリスト外をクリックしたらサジェストのリストを消す

便宜的に、テキストフィールドをinputタグ、サジェストリストをulで表します。

ダメな例

sample.html
<input onblur="サジェストのリストを消す処理" />
<ul onclick="選択されたオプションをinputのvalueに反映する処理">
    <li>@gmail.com</li>
    <li>@yahoo.co.jp</li>
    <li>@hogehoge.ne.jp</li>
</ul>

ブラウザによって挙動が異なるかもしれませんが、これだとうまくいかない事があります。
onclickよりonblurの方が早く発動するので、ulタグのonclickが発動する前に消えてしまい、選んだつもりの値がテキストフィールドに反映されません。

良い例

sample.html
<input onblur="サジェストのリストを消す処理" />
<ul onmousedown="選択されたオプションをinputのvalueに反映する処理">
    <li>@gmail.com</li>
    <li>@yahoo.co.jp</li>
    <li>@hogehoge.ne.jp</li>
</ul>

こうすると、選択されたオプションをinputのvalueに反映する処理の方が先に発動するので、想定通りの動作となります。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3