mootools 使用 Event.Delegation (:relay) 时停止事件冒泡

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
});

How do I Prevent the click event from fire on '.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-内容。那么停止它是没有意义的，div.parent 无论如何都会先出现：

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

这是当您在 .parent 中的事件到达委托人之前停止该事件时会发生的情况：

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

委托并非没有恐怕还有缺点:)

您可能还想阅读最近的这个问题/答案，其中涉及委托事件的更多注意事项以及它们与正常事件的不同之处，如何通过交替委托者来解决困难。 制作（可能动态加载）元素可通过 JavaScript 点击，但优先考虑 中包含的链接 - 我仍然希望 mootools 中的事件委托可能会有所改变，但我只是不明白它是如何改变的会对你的情况有所帮助。

Answer 2

我试图阻止在 div.parent 上触发委托单击事件。在我的特定情况下，这可以通过在 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 为我指明了正确的方向！