2

我有一个绑定到许多元素的点击功能。有时这些元素可能位于彼此内部。因此，click 事件绑定到子级，也绑定到其父级。该方法特定于单击的元素。自然，由于事件冒泡，首先触发子事件，然后触发父事件。我不能同时调用它们，因为父母事件会覆盖孩子的事件。所以我可以使用event.stopPropagation()这样只有单击的第一个元素接收事件。问题是元素上还附加了其他点击事件，例如，我在这些元素上使用了 jQuery 的可拖动事件。如果我停止点击事件的传播，那么 draggable 不起作用，并且不会调用以下点击事件。

所以我的问题是：有没有办法阻止事件将调用的方法而不是整个事件的事件冒泡？

辉煌的约翰，但这里有问题：

<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 列表的（suckerfish 风格）菜单结构。
mousemove 事件来自列表项内的链接，该链接是 ul-list 的子项，而 ul-list 又是另一个列表项的子项。典型的带有子菜单的 html 菜单结构。
evt.target 将是链接标记，但我们对列表项上的 mousemove 感兴趣。
更糟糕的是：链接标签可能包含 span 或 img 标签或其他嵌套的东西。那么 evt.target 就是这个 span 或 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 回答