24

HTML:

<div id="footer">
    <a class="button1 selected" id="button1" href="#"><div class="icon"></div><div class="text">Option 1</div></a>
    <a class="button2" id="button2" href="#"><div class="icon"></div><div class="text">Option 2</div></a>
    <a class="button3" id="button3" href="#"><div class="icon"></div><div class="text">Option 3</div></a>
    <a class="button4" id="button4" href="#"><div class="icon"></div><div class="text">Option 4</div></a>
</div>

JS:

$('#button1').click(function() {
    alert('button1');
});

$('#button2').click(function() {
    alert('button2');
});

現在、このスクリプトは私のPCブラウザーでは完全に機能しますが、iOSでは機能しません。私もこの解決策を試しました:$(document).click()がiPhoneで正しく機能していません。jqueryですが、機能しません。

私はjQuery1.8.3で使用していますが、jQuery Mobileは使用していません(使用したくない)。

誰かがこれを手伝ってくれる?

4

6 に答える 6

80

ボタンにポインタカーソルを追加し、.onを使用してクリックイベントをバインドしてみてください。

$('#button1').css('cursor','pointer');
$(document).on('click', '#button1',  function(event) {
    event.preventDefault();
    alert('button1');
});
于 2013-02-26T18:01:11.473 に答える
11

私はこれに出くわしました: http ://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html

つまり、iOSブラウザがタッチイベントからクリックイベントを生成するには、次の条件の1つを満たす必要があります。

  1. イベントのターゲット要素は、リンクまたはフォームフィールドです。
  2. ターゲット要素、またはまでの、ただしこれを含まないその祖先<body>のいずれかに、マウスイベントのいずれかに設定された明示的なイベントハンドラーがあります。このイベントハンドラーは空の関数である可能性があります。
  3. ターゲット要素、またはドキュメントまでのその祖先のいずれかにカーソルがあります:ポインタCSS宣言。
于 2016-04-07T08:34:00.357 に答える
2

一般的な解決策は次のようになります。

JS

const IS_IOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

if (IS_IOS) {
    document.documentElement.classList.add('ios');
}

CSS

.ios,
.ios * {
    // causes dom events events to be fired
    cursor: pointer;
}
于 2018-02-28T10:45:36.707 に答える
1

Yacuzoの答えは最も網羅的です。しかし、私は4番目のトリック(私のお気に入り)を追加したいと思います:

$('div:first').on('click', $.noop);

そして、最初のdivがターゲット要素の親であるかどうかは関係ありません!

于 2018-03-20T09:27:50.073 に答える
1

この問題の最も簡単な解決策はcursor: pointer;、ターゲットとする要素のスタイル(CSS)に追加することです。

#button1 {
    cursor: pointer;
}

または、これをインラインで追加することもできます。

<a class="button1 selected" id="button1" href="#" style="cursor: pointer;"><div class="icon"></div><div class="text">Option 1</div></a>
于 2019-06-20T15:39:59.743 に答える
0

$('#button1')。css('cursor'、'pointer');

この機能はcordova10.0、Xcode13.2では動作しません

この関数を使用します問題を解決します↓</p>

document.getElementById('chatpage').click();
document.getElementById('chatpage').click();

.2回クリックすると、問題を解決できます

ご参考までに

于 2021-12-23T07:08:07.720 に答える