質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.61%

  • JavaScript

    15900questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6530questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 773

span

score 3

該当のソースコード

  • HTML
<div class="backBtn">戻る</div>
  • JavaScript
$(".backBtn").on('touchend click', function() {
    history.back();
});

問題

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+4

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/12 17:49

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

    キャンセル

  • 2017/09/12 18:41

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

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

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

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

    キャンセル

  • 2017/09/12 18:58

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

    キャンセル

  • 2017/09/12 19:06

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

    ありがとうございます!

    キャンセル

  • 2017/09/12 19:52

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

    キャンセル

  • 2017/09/12 20:15

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

    キャンセル

checkベストアンサー

+1

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 で用意されていたイベントハンドラが実行されます。

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/12 18:23

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    15900questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6530questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。