Event cycle of touch and mouse event

  • Chromeでスマホ画面の検証中に、クリックイベントが2回実行されているような動きがあったので調査していた
  • Mouse eventとTouch eventがある
  • 標準的な仕様だと、Touch event後にMouse eventがトリガーされる

    • onTouchEndで preventDefault() を呼ぶとMouseEventがトリガーされなくなる
    • preventDefault() とは別で stopPropagation() もある
    • preventDefault() で何がキャンセルされるのかわかりにくい
  • イベントハンドラー内でfalseを返す方法がReactだと使えないので preventDefault()stopPropagation() を使う

参考URL