0

Webアプリケーションにjqueryを使用しています。タッチスクリーンデバイス用のデスクトップブラウザとモバイルブラウザに適していることを望んでいます。

私はdivを持っており、その中にいくつかの要素があります：

    <div class="well listItem element-div alert-error" data-state="removing">
     <strong>Item title</strong> <small>Items count</small>
     <div class="pull-right" style="margin-top: -5px;">
      <a class="btn btn-success approve-button"><i class="icon-ok icon-white"></i></a>
      <a class="btn btn-danger cancel-button"><i class="icon-remove icon-white"></i></a>
     </div>
</div>

.listItemクラス（トップレベルのdiv）のクリックイベントとタッチエンドイベント、およびすべての要素（.approve-buttonと.cancel-button）の同じイベントをキャッチしますが、「a」要素でデスクトップブラウザーをクリックすると、正しく機能します。iOSSafariブラウザまたはWindowsPhone InternetExplorerで「a」要素を押すと、親divのイベントのみが機能し、「a」は機能しません。親divのイベントリスナーを削除すると、モバイルブラウザで「a」要素のイベントが正しく機能します。親-divイベントは、その空き領域に触れたときに機能し、「a」要素に触れたときに機能するようにします。「a」イベントリスナーのみを続行します。それらを分離する方法を教えてもらえますか？

4

2 に答える 2

2

イベント対象を確認してみましたか？

$(".listItem").on("click", function(event){
  if (event.target === this) {
    // clicked exactly on this element
  }
});
于 2013-01-12T02:47:12.593 に答える
0

私も同様の問題を抱えていましたが、私のコンテンツだけがよりネストされていました。次のように：notセレクターを使用して、他のイベントを処理する予定の領域（div、classesなど）を除外する必要があります。

<article>
    <div class="title">
        <span class="title"></span>
        <div class="buttons">
            <div class="minimize">+</div>
            <div class="remove">x</div>
        </div>
    </div>
    <div class="post">
        ...
    </div>
</article>

jQueryの場合：

$("article :not(.buttons, .minimize, .remove)").click(function (event) {
    // toggle display value of div.post
});

これにより、 .buttons、.minimize、および.remove divを除いて、記事内の任意の場所でクリックイベントがトリガーされます。

于 2013-10-20T15:06:03.627 に答える