0

jquery (jquery mobile ではない) を実行している 1 ページのスクロール サイトがあります。ドロップ メニュー (順序なしリスト) の表示をトリガーするアンカー リンクがあります。ドロップ メニュー内のリスト項目をクリックすると、関連するスライドがアニメーション表示され、ドロップ メニューが非表示になります。

iOS ブラウザ以外のすべてでうまく機能します。私の問題は、リンクが最初にクリックされたときにしか機能しないことです。

私は、iOS でのマウス クリックとホバー イベントの区別についてよく読みました。解決策はどれもうまくいきません。

私はすべてを試しました：

  • #btn_menu 要素をアンカーと div にする
  • リンク、li タグ、ラップされた div タグに cursor:pointer スタイルを追加する
  • すべてのリスト メニュー項目でアンカー タグをラップする
  • タッチ イベントのトリガーに加えて、最初のクリック後に touchend、メニュー クリック イベントなどを起動しようとする
  • Hammer.js などのタッチ ライブラリ

シンプルなコード。

$("#btn_menu").on("click touchstart", function(e) {
    e.preventDefault();
    if ($(".nav_menu").css('display') == 'block') {
        $(".nav_menu").css('display','none');
    } else {
        $(".nav_menu").css('display','block');
    }
});

$(".nav_menu ul li").on("click touchstart", function(e) { 
    e.preventDefault();
    $(".nav_menu").css('display','none');
    gotoSlide($(this).attr('data-slide'));

    //Tried all this:   
    //$('body').trigger("click touchstart");
    //$('#btn_menu').trigger("touchstart touchend touchmove");
    //$('#btn_menu').data('clicked', null);
    //$('#btn_menu').trigger("mouseout");
});

HTML メニュー:

<a id="btn_menu" href="#" data-role="button">
<span class="menutxt">MENU</span>
</a>
<div class="nav_menu" style="display:none;">
<ul>
    <li data-slide="1">Home</li>
    <li data-slide="2">slide 1</li>
    <li data-slide="3">slide 2</li>
    <li data-slide="4">slide 3</li>
</ul>
</div>

**私が知っていることは起こっている**

最初の #btn_menu とそれに続く .nav_menu のクリックのみが完全に機能します。しかし、画面を少しタッチ/移動すると、次の #btn_menu クリックが機能します。#btn_menu のイベント リスナーがクリアされたように見えますか?

ホバー イベントは、最初のクリック後も機能し続けているようで、その後のすべてのクリックに干渉しています。「メニュー」という単語をクリックすると下線が引かれるので、これを知っています - #btn_menu のホバーをリッスンしているイベントをクリアできないようです

私の知恵の終わりに。この種のドロップ メニューの単一ページ サイトで、iOS でクリック イベントを動作させる方法について提案がある人はいますか?

コード内で slicknav.js などのソリューションをテストしましたが、これらも同じ問題を示しています。

4

1 に答える 1

0

「touchstart」を除いて、コードに異常はありません。Mozilla Developer Network（常に開始するのに適した場所）で調べたところ、（「クリックの処理」の下に）次のように書かれています。

touchstart またはシリーズの最初の touchmove イベントで preventDefault() を呼び出すと、対応するマウス イベントが発生しなくなるため、touchstart ではなく touchmove で preventDefault() を呼び出すのが一般的です。そうすれば、マウス イベントは引き続き発生し、リンクなどは引き続き機能します。

2 番目の関数で「e.preventDefault()」を削除するとどうなりますか?

于 2013-12-13T11:27:41.053 に答える