Edited at

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

More than 1 year has passed since last update.

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


まとめ

発火タイミング・イベントの種類・発火回数などなど、いろいろと差が確認できました

大変ですね・・・

単純にログを出して見ただけなので、なにかご指摘ありましたらお気軽にお願いいたします。