なぜかスマホのタッチイベントでpreventDefaultできないという未解決案件

preventDefaultが働かない

ごめんなさい。解決できていないです。

まず初めに断っておきます。先日、タイトルの通りデフォルトのイベント処理がキャンセルできない事象に遭遇しました。

あれやこれやと色々と試してみたものの、結局解決には至りませんでした。なぜかはまったく分からない。

とりあえず記録がてらに書きます。参考程度にお読みいただければ幸いです。

デフォルトのイベントを制御する

タッチイベントの取得

JavaScriptやjQueryを使い、イベントを取得してなんらかの処理を発生させる時、既存のブラウザの振る舞いが邪魔になることがあります。

この時、eventオブジェクトのpreventDefaultメソッドを使えば、デフォルトのイベント発生をキャンセルすることができます。

// イベント発生時に発火する関数内に記述する
function onEvent(e){
  e.preventDefault();
  あとの処理;
}

aタグにタッチイベントを追加するも

aタグにタッチイベントを仕込み、デフォルトのクリックで発生するイベント(ページ遷移)を下記の要領でキャンセルします。

jQueryを使ってのタッチイベントの取得については
→ 過去記事: jQuery使用時はevent.touchesではなくevent.originalEventでタッチイベントを取得

<!-- sample.html -->
<a href="#" id="alert">タッチ!</a>

// jQuery
$("#alert").on("touchstart", function(e){
  e.preventDefault(); // デフォルトイベントをキャンセル
  alert("タッチイベント取得!");
});

これで「タッチ!」をタップすれば、アラートウィンドウが表示されてイベント終了。と、なるはずです。

なぜかデフォルトのイベントまで発生してしまう

しかし、なぜか意図した通りに動いてくれる場合とくれない場合が発生しました。

いくつかの端末でページのスクロールが上まで戻ってしまうのです。

それはaタグのデフォルトイベントがそのまま発生しているということを意味します。なぜだ。。。

理解できない

バブリングが原因?

「古いアンドロイド端末では、preventDefaultが効かない。」という記事を目にし、その際には、「デフォルトイベントとバブリング両方を制御するstopImmediatePropagation()を使えば解決する!」と、いうことを知りました。

しかし、試してみるも解決ならず。てか、iPhoneでも同じことが起こっているらしいんだよなぁ…。

根本的な問題が分からないまま苦肉の解決策

もうまったく訳が分からない。しかしなんとかしなければならない。

ってなわけで、私が取った解決策は、「aタグを取り除いて、違うタグをあてる。」です。お恥ずかしい話ですほんとに。

これで二重にイベントが発生することはなくなりました(当然)。

しかしまったくスッキリしない。。。

(Visited 2,715 times, 1 visits today)

“なぜかスマホのタッチイベントでpreventDefaultできないという未解決案件” への1件の返信

コメントは受け付けていません。