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"的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无论如何都会先来:

这是在.parent到达委托者之前从.parent停止事件时会发生什么:

代表团不是没有它的缺点,我害怕:)

您可能还想阅读最近的问题/答案,这些问题/答案涉及委托事件的更多警告以及它们与正常事件的区别,如何通过交替委托人来解决困难.使(可能是动态加载的)元素可以通过JavaScript点击,但优先考虑其中包含的链接 - 我仍然希望mootools中的事件委托可能会有所改变,但我只是看不出它会如何帮助你的情况.