2

多くの要素にバインドされたクリック機能があります。場合によっては、これらの要素が相互に収まっている可能性があります。そのため、クリック イベントは子にバインドされ、その親にもバインドされます。メソッドは、クリックされた要素に固有です。当然のことながら、イベントのバブリングにより、子のイベントが最初に発生し、次に親のイベントが発生します。親のイベントが子のイベントを上書きするため、両方を同時に呼び出すことはできません。したがってevent.stopPropagation()、クリックされた最初の要素のみがイベントを受け取るように使用できます。問題は、他のクリック イベントも要素に関連付けられていることです。たとえば、これらの要素で jQuery のドラッグ可能オブジェクトを使用しています。クリック イベントの伝播を停止すると、ドラッグ可能は機能せず、次のクリック イベントは呼び出されません。

だから私の質問は:イベント全体ではなく、イベントが呼び出すメソッドのイベントバブリングを停止する方法はありますか?

素晴らしいジョンですが、ここに問題があります。

<div id="Elm1"><!-- relative -->
 <div class="Elmchildren"></div><!-- absolute-->
 <div class="Elmchildren"></div><!-- absolute-->
 <div class="Elmchildren"></div><!-- absolute-->

 <div id="Elm2"><!-- relative -->
  <div class="Elmchildren"></div><!-- absolute-->
  <div class="Elmchildren"></div><!-- absolute-->
  <div class="Elmchildren"></div><!-- absolute-->
 </div>

</div>

クリック イベントは と にバインドされ#Elm1ます#Elm2。.Elmchildren幅と高さは 100% です。つまり、彼らは実際に現在のターゲットです。

4

2 に答える 2

4

このようなものを試してください

$(mySelector).click(function(evt) {
  if (evt.target == evt.currentTarget) {
      ///run your code.  The if statment will only run this click event on the target element
      ///all other click events will still run.
  }
});
于 2010-06-04T20:31:17.643 に答える
1

提案された解決策

evt.target == evt.currentTarget

はいいですが、役に立たない場合があります。

例: ネストされた ul/li リストを持つ (サッカーフィッシュ スタイルの) メニュー構造。
mousemove イベントは、別のリスト項目の子である ul-list の子であるリスト項目内のリンクから発生します。サブメニューを持つ html メニュー構造の典型です。
evt.target は link タグになりますが、リスト アイテムの mousemove に関心があります。
さらに悪いことに、link タグには、span または img タグ、またはその他のネストされたものが含まれる可能性があります。次に、evt.target はこのスパンまたは img になります。

ここで機能しているように見えるのは、親/ルート アイテムでイベントをキャッチし、evt.target の親をチェックすることです。

このように（jQueryで）、

var $menu = $('div#menu');
$('body').mousemove(function(evt){
  var element = evt.target;
  // find the deepest list item that was affected by this mouseover event.
  var list_item;
  var in_menu = false;
  while (element) {
    if (element == $menu[0]) {
      in_menu = true;
      break;
    }
    else if (!list_item && element.tagName == 'LI') {
      // we found a list item, but we are not sure if we are inside the menu tree.
      list_item = element;
    }
  }
  // do something with the result.
  if (!in_menu) {
        .. // close all submenus
  }
  if (list_item) {
    .. // open the submenu for this list item.
  }
  else {
    // mouse in menu, but not hovering an item.
    // leave the submenus open. (?)
  }
});

おそらく、これの一部は $(evt.target).parents().is($menu) のように jQuery で省略できますが、これを機能させることはできませんでした。また、この element.tagName を使用した明示的なループの方が速いと思います。

于 2011-08-01T01:10:29.387 に答える