LoginSignup
9
11

More than 5 years have passed since last update.

PC,スマホ間のイベント発火タイミングの違い

Last updated at Posted at 2017-03-08

PCとスマホ端末のevent発火の違いをまとめました
こちらはtextareaを対象にしています。

textareaにforcusした際

PC, スマホに差異はありませんでした

PCの場合

touchstart
touchend
touchend
mouseover
mousemove
mousedown
focus
mouseup

スマホ端末の場合(iOS)

touchstart
touchend
touchend
mouseover
mousemove
mousedown
focus
mouseup

textareaにキー入力した際

PCでは keypress が発生しないこと、keydown keyup が2回発生すること
などの差違がありました
ついでに focusなども発生しません

PCの場合

keydown  - textarea.value = ""
keyup    - textarea.value = "あ"
keydown  - textarea.value = "あ"
keyup    - textarea.value = "あ"
change    - textarea.value = "あ"
blur     - textarea.value = "あ"
focus    - textarea.value = "あ"
blur      - textarea.value = "あ"

スマホ端末の場合(iOS)

keydown   - textarea.value = ""
keypress  - textarea.value = ""
keyup      - textarea.value = "あ"

textareaにコピー&ペーストした際

PCの場合

focus       - textarea.value = ""
touchstart  - textarea.value = ""
touchend    - textarea.value = ""
touchend    - textarea.value = ""
mousemove   - textarea.value = ""
mousedown   - textarea.value = ""
mouseup     - textarea.value = ""
keydown     - textarea.value = ""
keydown     - textarea.value = ""
paste       - textarea.value = ""
keyup       - textarea.value = "あ"
keydown     - textarea.value = "あ"
keypress    - textarea.value = "あ"
keyup       - textarea.value = "あ"
change      - textarea.value = "あ"
blur        - textarea.value = "あ"

スマホ端末(iOS)の場合

※ ペーストし、textareaに反映された後のイベントの発火がない

touchstart    - textarea.value = ""
touchend    - textarea.value = ""
touchend    - textarea.value = ""
ペースト選択ボタンが出る
ペーストボタン押下
paste    - textarea.value = ""

この後タッチなどをしてイベントを発火させるとvalueの中身が入っていることが確認できた
これを防ぐには setTimeout などで 0.1 秒遅らせたりいろいろなんか対応する必要がある・・・(;;
こんな素敵な記事がありました
http://manji602.hatenablog.com/entry/20130829/1377767902

まとめ

発火タイミング・イベントの種類・発火回数などなど、いろいろと差が確認できました
大変ですね・・・
単純にログを出して見ただけなので、なにかご指摘ありましたらお気軽にお願いいたします。

9
11
0

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
9
11