タッチデバイスでは、要素に触れると次のイベントがトリガーされます。

  • タッチスタート
  • タッチエンド
  • mouseenter
  • マウスダウン
  • マウスアップ
  • クリック

mouseenter、mousedown、mouseup、およびclickイベントは、touchendイベントによってエミュレートされます。このマウスイベントのエミュレーションを無効にする場合は、preventDefault()を使用できます。

しかし、iOS Safariで要素の端に触れると、次のイベントがトリガーされます。

  • mouseenter
  • マウスダウン
  • マウスアップ
  • クリック

どういうわけか、タッチイベントはエッジでトリガーされません。このため、preventDefault()を使用してマウスイベントのエミュレーションを停止することもできません。

この問題は、iPhoneとiPadの両方で発生します。

Stack OverflowとGoogleを検索しましたが、これについては何も見つかりません。バグも解決策もありません。これがSafariの既知のバグであるかどうか誰かが知っていますか?

JSFiddleでこのエラーを再現するための最も基本的なコードを作成しました

HTML:

<div id="element"></div>
<div id="log"></div>

CSS:

#element {
  height: 100px;
  width: 100px;
  background: yellow;
  margin: 20px;
}

JavaScript:

function handler(event) {
  const log = document.getElementById('log');
  
  log.innerHTML = `${event.type}<br />${log.innerHTML}`;
}

const element = document.getElementById('element');

element.addEventListener('mouseenter', handler);
element.addEventListener('mouseleave', handler);
element.addEventListener('mousedown', handler);
element.addEventListener('mouseup', handler);
element.addEventListener('click', handler);
element.addEventListener('focus', handler);
element.addEventListener('blur', handler);
element.addEventListener('touchstart', handler);
element.addEventListener('touchend', handler);
応答

イベントリスナーを最も外側の要素であるhtmlタグにアタッチしてみてください。

詳細: https ://www.tutorialrepublic.com/javascript-tutorial/javascript-event-propagation.php