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

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

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

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

jQuery

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

HTML

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

CSS

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

Q&A

1回答

708閲覧

htmlでページを作っているのですがスマホのみ .on('click'が効かなくて困っています。

pepe1122

総合スコア14

JavaScript

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

jQuery

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2021/07/12 20:31

編集2022/01/12 10:55

前提・実現したいこと

HTMLでBOXを表示し
バツボタンを押すとフェードアウトするような処理を実装したのですが、スマホでは閉じることが出来なく困っています。
こんな少しのコードですがどこを修正したらよろしいのでしょうか?
よろしくお願いします。

該当のソースコード

HTML

1 <div class="float-box"> 2 <a href="リンク先" class="float-content"> 3 <p>内容</p> 4 </a> 5 <div class="close"> 6 <a href="javascript:void(0)" class="end-btn" style="cursor: pointer;"> 7 <img src="/img/close.png"> 8 </a> 9 </div> 10 </div>

js

1 $(function(){ 2 $('.end-btn').on('click', function(){ 3 $('.float-content').fadeOut(300); 4 }); 5 6 var clickEventType = (( window.ontouchstart!==null ) ? 'click':'touchend'); 7 $(document).on(clickEventType,'.end-btn',function(){ 8 $('.float-news').fadeOut(300); 9 }); 10 }); 11

css

1.close img { 2 width: 100%; 3} 4.end-btn { 5 width: 100%; 6 height: 100%; 7 z-index: 2; 8 cursor: pointer; 9} 10 11.close { 12 position: absolute; 13 top: 0; 14 right: 0; 15 width: 36px; 16 height: 36px; 17 cursor: pointer !important; 18} 19 20.float-box{ 21 position: fixed; 22 display: flex; 23 align-items: center; 24 border-width: 2px; 25 border-style: solid; 26 border-color: #bbbbbb; 27 border-radius: 10px; 28 background-color: #ffffff; 29 bottom: 30px; 30 left: 30px; 31 width: auto; 32 max-width: 480px; 33 min-width: 240px; 34 z-index: 2; 35 } 36 37

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

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

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

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

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

guest

回答1

0

CSSもないと何とも言えませんが下記全角スペースは気になります。

class="end-btn"[ ]style="cursor: pointer;"

それでもというときはtouchendも拾ってみてください。
レスポンシブ対応時にクリックイベントが、うまく動作しない時の対処法

投稿2021/07/12 20:50

m.ts10806

総合スコア80765

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

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

pepe1122

2021/07/13 05:09

回答ありがとうございます。 CSS略しようとし、質問内で記入しようとしたことから空白はいっておりました。 実際のコードでは入っていませんでした。 css追記し、jsもタッチのイベント拾うように修正したのですが、スマホのみ思い通り動作しません。 何かわかりましたらご教授お願いしたいです。
m.ts10806

2021/07/13 05:23

clickEventTypeにはなにが入りましたか?デバッグしてみてください
m.ts10806

2021/07/13 05:24

また、省略しようとへたに手を加えると今回のようなことが起きますし、回答者の手元で同じ現象が再現できないこともあります。 コピペで他者が再現できるようご配慮願います。
m.ts10806

2021/07/13 05:26

しかし現状だとクリックが2回発生しませんか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問