0

ビューからは隠されているが、画面をタッチ/クリックすると表示されるナビゲーションメニューを作成しようとしています。

私が見る問題は、画面上の多くの場所をタッチ/クリックすると、ナビゲーションメニューが開き、同時に近くにある可能性のあるボタン、リンクなどでイベントがトリガーされることです。

:notこれまでのところ、 jQuery の句でこれを処理しようとしています。残念ながら、:not内のどこをクリックしてもトグルが発生するため、句で機能しないものがありますbody。

HTML:

<div id="NavigationMenu">i'm the navigation menu</div>
<div class="icon-reorder">toggle</div>
<div id="main_content">i'm the main content
  <button type="button">button</button>
</div>​

JS:

$(document.body).on('click', ['body:not(".btn, a, i, button, input, textarea")', '.icon-reorder'], function(){
    console.log('clicked');
    $('#NavigationMenu').toggle();
    $('#main_content').toggle();
});

$('button').on('click', this, function(){
   console.log('button clicked');
});

誰かがこのコードを手伝ってくれるでしょうか? それとも、これはこの問題を解決するための正しい方法ですか? 私には少しハックっぽいように見えます。

このナビゲーション メニューは私のサイトのメイン メニューであるため、煩わしい UI/UX (ナビゲーションが開きすぎたり小さすぎたりする) があると問題が発生します。私は主にタッチ対応のコードに興味がありますが、UI/UX に関するあらゆる提案を歓迎します...

4

1 に答える 1

2

句を使用する代わりに、:notイベント委任を使用しないでください (これは、2 か月前に学んだばかりですが、親要素でコールバックを使用してイベントを処理するための派手な用語です)。

$(body).on("click", function(event) {
  if(event.target.type !== "button" && <whatever other conditions>) {
       <toggle menu>
  }
});

これは更新されたFiddleです。クリック イベント オブジェクトをコンソールに記録しているので、event.target を見て、比較するニーズにより適したものがあるかどうかを確認できます。

于 2012-06-30T17:25:28.517 に答える