JavaScriptのhistory.back()の挙動について

Question

###該当のソースコード

• HTML

<div class="backBtn">戻る</div>

• JavaScript

$(".backBtn").on('touchend click', function() {
    history.back();
});

###問題
遷移先のページより戻るをタッチした際に、戻った先の指の下に存在する別リンクが反応してしまい意図しない挙動をして他ページへ飛んでしまいます。これはなぜなのでしょうか？
(※スマートフォンサイトのみです。PCは問題なく動きます。)
history.back();の下でreturn false;をすれば意図した挙動になるのですがtouchendイベントをキャンセルさせることでなぜ戻り先のリンクもキャンセルされるのか理解できず釈然とした状況です。
どなたか理由がわかる方がいらっしゃったら教えていただけないでしょうか。

Answer 1

touchstartイベントが発生するタイミングはGoogleのWeb Fundamentals サイト上でのタップ操作をサポートするによると初めて要素に指が触れたとき、またはユーザーがマウスでクリックをしたときに発生と記載してあります。

なので、ボタンをクリックしてmodalが出現するUIで、modal内に設定してあるtouchstartイベントや、リンクなどのDOMの位置がボタンと一緒になった場合や、戻った先の指の下に存在する別リンクが存在する場合は、画面上ではボタンの位置をtouchしているので、イベントが発生してしまいます。

Comments

[span]

ご回答ありがとうございます！いただいたサポートページ拝見させていただきtouchstartイベントの場合は理解できたのですが今回のケースのtouchendイベントの場合は要素から指を離した時に発生という認識なのですが、その場合は離した瞬間にイベントの処理が発生→終了→戻り先のページの読み込み(離した後に戻り先のページが読み込まれているので戻り先のリンクなどのDOMには触れようがない)というのは間違った認識でしょうか？

[MasakazuFukami]

すいません下の方の回答で大丈夫そうでしょうか？
おそらく下の方が仰っているのは、イベントのcapure, target, bubblingの各phaseへイベントの伝達が行われるということ、return false（実際はbubblingを止めるにはe.stopPropagation()、今回の事例ではe.preventDefault()だけで大丈夫）を行うとそれを止めることが出来るということ。

なので、今回の事例でそれが起きるとすれば、
div.backBtnを囲うようにリンク要素が配置されている場合でかつ、ページ遷移自体をJSで制御するようなSPAで出来ている場合だと思われます。

僕の勝手な想像ですが、すべてサーバーサイドレンダリングで実装されているのではないかと思っており、hitory,back()をすると新しいhtmlがレンダリングされ始められるのでbubbling系の話ではないのではないかなぁと思っています。

仮に僕の勘違いでしたらスイマセン！

[unau]

なるほど、SPA やら SSR はまだまともに実装したことがないので、そういうところにまで頭がいっていなかったのが実状です。今、SPA なサービスを設計中ではあるので、勉強になります。

[MasakazuFukami]

@unau さん
なんか文句を言ってるみたいになってスイマセン。。。
僕もcapture phaseとbubbling phaseに関しての知識はあったのですが、target phaseというものを知らなかったので勉強になりました！！

ありがとうございます！

[unau]

よい質問をキッカケに、より正しい知識、深い見識、広い視野などが得られるのが teratail のいちばんの醍醐味ではないでしょうか。
なので、間違っているところを間違っていると指摘されるのは、驚くことがあっても、不快に思うことはありません。まあ、個人の恥みたいなものに頓着することなく、中身のある議論をしていきたいところですよね！

[span]

お二人とも本当に有難うございます。今回お二人からの助言で今まで勘違いしていたイベントの挙動など知り得る事ができました！
正直助言いただいた中でまだ理解しきれていない事もありますがこれから一つずつ読み解いて理解に繋げたいと思います。本当に有難うございました！

Answer 2

UI Events : 3.1. Event dispatch and DOM event flow の図がわかりやすいと思いますが、div.backBtn の touchend イベントハンドラキックされるのは、div.backBtn が末端としたら Target Phase のときです。div.backBtn 親要素にイベントが登録されていれば、Capture Phase のときにすでにチェックされイベントを認識し、Bubbling Phase で戻ってきたときにイベントハンドラが起動します。つまり、div.backBtn のイベントハンドラが実行されているときには、すでに親要素のイベントハンドラも実行待ちの状態になっているということです。
もし、div.backBtn の touchend イベントハンドラの最後に return false; があると、Bubbling がキャンセルされるので、Capture Phase で用意されていたイベントハンドラは実行されません。が、Bubbling がおこれば、Capture Phase で用意されていたイベントハンドラが実行されます。

(用語の正しさには自信ありません ...)

Comments

[span]

なるほど理解できました！そもそものhistory.backの挙動を勘違いしていたことも原因でした,,,ご回答ありがとうございました！！