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

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

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

6060閲覧

2回目のpreventDefaultが効かない

sunagimochan

総合スコア12

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/07/26 10:54

編集2016/07/26 10:56

###前提・実現したいこと

  • リンクをクリックした際に1度で遷移させず、ポップアップさせてからもう一度クリックさせて遷移させたい。

###発生している問題

  • 閉じるボタンを押した後にもう一度ポップアップさせると一発で遷移してしまいます。

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

html

1 <div class="frame_pop" id="pop_base"> 2 <p class="btn_close">閉じる</p> 3 <div class="inner_pop" id="pop_popup"> 4 <a href="https://www.google.co.jp/" id="pop_link" class="pop_link"><img src="spacer.gif"></a> 5</div> 6 </div>

css

1.frame_pop { 2 width: 480px; 3 height: 120px; 4 margin: auto; 5} 6.inner_pop { 7 width: 100%; 8 background-color: #00BBFF; 9} 10.pop_link { 11 display: block; 12 height: 100%; 13} 14.frame_pop.active { 15 background-color: #000; 16 position: fixed; 17 width: 100%; 18 height: 100%; 19 z-index: 1000; 20 top: 0; 21 bottom: 0; 22 left: 0; 23 right: 0; 24 text-align: center; 25 color: #fff; 26} 27.frame_pop.active .inner_pop { 28 background-position: center 40px; 29 height: 100%; 30} 31.btn_close { 32 display: none; 33 max-width: 480px; 34 text-align: right; 35 margin: auto; 36 height: 40px; 37 cursor: pointer; 38} 39.active .btn_close { 40 display: block; 41}

javascript

1$(function () { 2 'use strict'; 3 var btn = '#pop_link'; 4 var baseID = '#pop_base'; 5 var popID = '#pop_popup'; 6 var aTxt = 'active'; 7 8 $(popID).click(function (e) { 9 $(baseID).addClass(aTxt); 10 var url = $(this).find('a').attr('href'); 11 12 $('.' + aTxt + ' ' + btn).click(function () { 13 window.location.href = url; 14 }); 15 16 $(baseID + ' .btn_close').click(function () { 17 console.log(); 18 $(baseID).removeClass(aTxt); 19 }); 20 e.preventDefault(); 21 }); 22}); 23

###補足情報

  • jqueryのバージョンは1.4から上げることができません。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

動くサンプル:https://jsfiddle.net/09r2rL3u/
「何かを押す」⇒「リンク用のポップアップ」⇒「クリック」という流れであれば、「何か」はa要素でないほうが都合が良いのでは。(コード見てもらえれば意味が伝わると思います)

また、clickイベントなどイベント内でイベントを設定すると、クリックイベントが起きるたびに重複してイベントが追加されていきますので、window.onload とか1回しかないイベント以外ではイベント内でイベントの追加は避けたほうが良いです。

特に書かれているコードではクリック「閉じる」ボタンへのクリックイベント付与はいつおこなっても問題が無い(閉じるボタンが表示されているとき意外はクリックできないので問題が起きない)ので外出ししておくほうが良いかと思います。

投稿2016/07/27 16:11

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sunagimochan

2016/07/29 09:05

unbindで無理やり実現してみましたが、ご提示いただいたソースの方がスマートでよさそうです。 ご回答ありがとうございました。
guest

0

とりあえず

e.preventDefault();

を先頭に持ってきて、クリックした時点ですぐに本来のクリックイベントをキャンセルすることですかね。
この位置です。

$(popID).click(function (e) { e.preventDefault(); $(baseID).addClass(aTxt);

今のままだと

window.location.href = url;

の処理が先に走ってしまうのではないでしょうか?

投稿2016/07/26 13:30

NatsumiOki

総合スコア1298

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sunagimochan

2016/07/26 14:11

ご回答ありがとうございます。ご指定の通りコードを修正いたしましたが、 変更前と同様に閉じるボタンを押して開きなおした際に一発目で遷移してしまいます。 他にはどのような原因が考えられますでしょうか。
NatsumiOki

2016/07/27 06:55

あとは親要素をクリックしたときにa要素をクリックしたことになってしまったりしてると思うので、イベント伝播を防ぐためにe.stopPropagation()を使ってみる、とかですかね。 もしくは、親のclassに応じて中のa要素をpointer-events:none;でクリックできない状態にしておくとか。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問