該当のソースコード
対象のリンクを踏んだ場合にpreventDefaultで挙動を制御し
setTimeoutで遅延処理を行ってからページを遷移させるというものとなります。
html
<a href="/example.html">サンプル</a> <a href="/hoge.html" class="ta">ほげ</a> <a href="/fuga.html" class="ta">ふが</a>
js
const links = document.getElementsByClassName('ta'); for(let i = 0; i < links.length; i++) { links[i].addEventListener('click', function(event){ event.preventDefault(); function delay(){ window.location.href = links[i].href; } setTimeout(delay, 10*1000); }); };
発生している問題・エラーメッセージ
iPhoneを使用して挙動を検証した場合に
- 対象のリンクを踏む
- イベント処理が完了し切る前に別のリンクを踏む
- ページ遷移後にブラウザバック
という動作を行うと、ブラウザバック後もイベントが中断されておらず再びイベントの内容に従ってページが遷移されてしまいます。
前提・実現したいこと
イベント発火中、自ら他のページにアクセスをした場合にイベントを中断させ、ブラウザバックをした場合でも処理が継続して実行されない様にするにはどうすると良いのでしょうか?
試したこと
例えば掲示したコードでは10秒待ったあとにページが遷移するものとなっておりますが対象リンクを踏み、5秒後に別ページへとアクセスをし、ブラウザバックをすると再び残る5秒を待機した後にページが遷移されてしまいます。
Android端末のブラウザやwindowsにおけるブラウザでは同様の症状は現れませんでした。
補足情報(FW/ツールのバージョンなど)
該当のテスト環境はiOS14.6
症状が確認出来たブラウザはChrome,safari
(その他のブラウザでは検証しておりません)
まだ回答がついていません
会員登録して回答してみよう