使用Event.Delegation（：relay）时，mootools停止事件冒泡

Question

我正在向通过ajax加载的链接添加事件。这是html的简化示例：

<div class="ajax-content">
  <div class="parent">
    <a href="#" class="event-link">Click here</a>
  </div>
</div>

“。ajax-content”中的所有内容都是通过ajax加载的。我不希望“ .event-link”的点击事件冒泡到“ .parent”。如果没有通过ajax加载，我可以这样做：

$$('.event-link').addEvent('click', function(event){
  event.stopPropagation();
  event.preventDefault();
  //do stuff
});

但是，我无法弄清楚如何使用（click：relay）完成相同的行为。这就是我正在尝试的：

$$('.ajax-content').addEvent('click:relay(.event-link)', function(event){
  event.stopPropagation();
  event.preventDefault();
  //do stuff
});

如何防止点击事件在“ .parent”上触发？ （我还尝试了其他语法-event.stop()并返回false，但结果相同。）

Answer 1

考虑您的DOM顺序和事件从DOM树顶部向下的传播顺序：

<div class="ajax-content">
  <div class="parent">
    <a href="#" class="event-link">Click here</a>
  </div>
</div>

您将事件附加到div.ajax-content（委托人）。这意味着，当它被击中时，它已经需要先冒出a.event-link，然后是div.parent，然后最后是div.ajax-content。然后停止它是没有意义的，无论如何div.parent会先出现：

http://jsfiddle.net/dimitar/ChrCq/

当您在事件到达委托方之前从.parent停止事件时，会发生以下情况：

http://jsfiddle.net/dimitar/ChrCq/1/

授权不是缺点，恐怕：）

您可能还想读一下最近这个有关授权事件的更多警告，它们与正常事件有何不同，如何通过轮流委派代表来解决困难，这是更多的警告。 Make (possibly dynamically loaded) element clickable via JavaScript, but give precedence to links contained within-我仍然希望mootools中的事件委托可能有所更改，但我看不出它如何对您的情况有所帮助。

Answer 2

我试图防止div.parent上触发委派的click事件。在我的特定情况下，可以通过在div.parent事件中添加对事件目标的检查来完成此操作：

$$('.ajax-content').addEvent('click:relay(.event-link)', function(event){
  console.log("hi");
  event.preventDefault();
  //do stuff
});

$$('.ajax-content').addEvent('click:relay(.parent)', function(event) {
  if (event.target.match('a')) return false;
  console.log("parent");
});

感谢Dimitar向我指出正确的方向！