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

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

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

onclickとはユーザーのクリック処理を指します。これは"onmousedown"(押下)と"onmouseup"(押上)の二つの事象の組み合わせです

JavaScript

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

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2217閲覧

クリックでモーダルが消えるようにしているがその中のaタグリンクが機能しない

sei11

総合スコア5

onclick

onclickとはユーザーのクリック処理を指します。これは"onmousedown"(押下)と"onmouseup"(押上)の二つの事象の組み合わせです

JavaScript

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

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/04/21 08:48

前提・実現したいこと

onclickでのイベントがaタグより優先されてしまいaタグの遷移ができません。どうすればできますでしょうか

発生している問題・エラーメッセージ

クリックでモーダルが消えるようにしているがその中のaタグリンクが機能しない

### 該当のソースコード ```<script> window.onload = function() { if( !sessionStorage.getItem('disp_popup') ) { sessionStorage.setItem('disp_popup', 'on'); var popup = document.getElementsByClassName('bg_onetime_popup'); popup[0].classList.add('js_active'); popup[0].onclick = function() { popup[0].classList.remove('js_active'); } } } </script> <div class="bg_onetime_popup"> <div class="onetime_popup"> <p class="onetime_popup_title">text</p> <div class="onetime_popup_content"> <p>text<br><br> <a href="https://www.he-llo.net/news/141325.html">詳しくはこちらをご覧ください</a> </p> </div> </div> </div> <style> @media screen and (min-width:600px){ .bg_onetime_popup { position: fixed; top: 0px; left: 0px; z-index: 9997; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: 0.5s; } .bg_onetime_popup.js_active { opacity: 0.9; visibility: visible; } .bg_onetime_popup.js_active a{ z-index: 9999; background: #117ec6 none; border: 1px solid rgba(0,0,0,.04); box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.1), 0 1px 5px 0 rgba(0,0,0,.12); color: #fff; z-index: 15; } } .onetime_popup { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); width: 50%; min-width: 500px; background-color: #fff; cursor: pointer; pointer-events: none; z-index: 9999; } .onetime_popup_title { position: relative; padding: 30px 90px; margin: 0px; background-color: #23282D; color: #fff; font-size: 24px; text-align: center; line-height: 1.5; } .onetime_popup_title:before { transform: rotate(45deg); } .onetime_popup_title:after { transform: rotate(-45deg); } .onetime_popup_content { padding: 60px 30px; text-align: ; } } </script>

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

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

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

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

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

m.ts10806

2020/04/21 09:21

マークダウンのコードが有効になっていません。調整してください。
yambejp

2020/04/22 00:55

例がわるい、sessionStorage絡みの記述が書いてあると 再現性が確認できなくなります 機能をわけて躓いている部分を切り出して質問してください
guest

回答1

0

ベストアンサー

CSSで.onetime_popup に指定している pointer-events: none; が原因だと思います。
aタグに pointer-events: auto; と指定すればクリックできるようになると思います。

投稿2020/04/21 14:00

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問