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

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

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

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

Q&A

解決済

1回答

1797閲覧

addEventListenerで登録したクリックイベントがiOSで発火しない

myc

総合スコア18

JavaScript

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

0グッド

0クリップ

投稿2019/05/04 17:21

編集2019/05/05 04:04

前提・実現したいこと

javascriptでモーダルを実装していますが、iOSでのみモーダルを表示するクリックイベントが発生しません。

該当のソースコード

codepen
https://codepen.io/mycreatesite/pen/YbKvQL

html

1<button id="openModal">Open modal</button> 2 3<section id="modalArea" class="modalArea"> 4 <div id="modalBg" class="modalBg"></div> 5 <div class="modalWrapper"> 6 <div class="modalContents"> 7 <h1>Here are modal without jQuery!</h1> 8 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> 9 </div> 10 <div id="closeModal" class="closeModal"> 11 × 12 </div> 13 </div> 14</section>

css

1* { 2 box-sizing: border-box; 3} 4body { 5 font-family:'Avenir','Helvetica, Neue','Helvetica','Arial'; 6} 7 8.modalArea { 9 visibility: hidden; 10 opacity : 0; 11 position: fixed; 12 z-index: 10; 13 top: 0; 14 left: 0; 15 width: 100%; 16 height: 100%; 17 transition: .4s; 18} 19 20.modalBg { 21 width: 100%; 22 height: 100%; 23 background-color: rgba(30,30,30,0.9); 24} 25 26.modalWrapper { 27 position: absolute; 28 top: 50%; 29 left: 50%; 30 transform:translate(-50%,-50%); 31 width: 70%; 32 max-width: 500px; 33 padding: 10px 30px; 34 background-color: #fff; 35} 36 37.closeModal { 38 position: absolute; 39 top: 0.5rem; 40 right: 1rem; 41 cursor: pointer; 42} 43 44.is-show { 45 visibility: visible; 46 opacity : 1; 47} 48 49button { 50 padding: 10px; 51 background-color: #fff; 52 border: 1px solid #282828; 53 border-radius: 2px; 54 cursor: pointer; 55} 56 57#openModal { 58 position: absolute; 59 top: 50%; 60 left: 50%; 61 transform:translate(-50%,-50%); 62}

js

1(function () { 2 const modalArea = document.getElementById('modalArea'); 3 const openModal = document.getElementById('openModal'); 4 const closeModal = document.getElementById('closeModal'); 5 const modalBg = document.getElementById('modalBg'); 6 const toggle = [openModal,closeModal,modalBg]; 7 8 for(let i=0, len=toggle.length ; i<len ; i++){ 9 toggle[i].addEventListener('click',function(){ 10 modalArea.classList.toggle('is-show'); 11 },false); 12 } 13}());

試したこと

cssで発火要素にcursor:pointerを当てたり、イベントをclickではなくtouchstartにしてみても発火しない状態です。

補足情報

所有するiphoneはios12.2で、safari / chrome / firefoxが全滅です。
OSのバージョンは定かではないですが、androidスマートフォンでは正常にイベントが発火します。

どなたかお知恵をお借りできますでしょうか。

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

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

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

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

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

guest

回答1

0

ベストアンサー

CodePen環境のときだけ発生する問題。
通常のHTMLページ上では動作します。

投稿2019/05/05 06:34

yasutomi

総合スコア2937

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

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

myc

2019/05/05 14:48 編集

完全に盲点でした。。 サーバーにファイルをアップロードして確認した所、正常に動作致しました。 ご回答ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問