javascript - 使用事件委托观察具有特定类的元素或该元素的子元素的事件

Question

我有一个页面，其元素类似于：

<div id='things'>
    <div class='thing'>
        <div class='activator'>
            <span>Some text</span>
        </div>
    </div>
</div>

代码与此类似：

$('things').observe(click, function(event) {
    var e = event.element();
    if (e.match('.activator')) {
        doSomeStuffWith(e);
    } else if (e.match('.activator *')) {
        doSomeStuffWith(e.up('.activator');
    }
});

因此，如果我单击 .activator 或其任何子元素，我想在 .activator 上调用一个函数，我只是想知道是否没有某种方法可以组合这两个 if 子句。像 if (e.match('.class, .class *') { doStuff(e.upOrSelf('activator')); }

我想我可以使用 upOrSelf 方法扩展 Element。但如果可能的话，我宁愿不做任何非标准的定制。

Answer 1

有关在 Prototype 中进行事件委托的更通用方法的讨论，请参见此处。在页面下方有一个实现，Event.delegate()它使用一个小技巧来实现您想要的。它收集目标元素及其祖先，并将事件侦听器应用于所有匹配的元素，使用Selector.matchElements.

它比这复杂一点，但这里有一个缩写版本（未经测试）：

$('things').observe('click', function(event) {
    var child = event.element();
    var ancestors = [child].concat(child.ancestors());
    Selector.matchElements(ancestors, '.activator').each(function(element) {
       doSomeStuffWith(element);
    });
})