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”的click事件冒泡到“.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到达委托人之前从.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

我试图阻止委托的click事件在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指出我正确的方向！

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

2 个答案: