代码之家 › 专栏 › 技术社区 › Sam

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

event-delegation prototypejs javascript

Sam · 技术社区 · 15 年前

我有一个页面的元素与此类似:

<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方法扩展元素。但如果可能的话,我不想做任何非标准的定制。

1 回复 | 直到 13 年前

Øystein Riiser Gundersen 15 年前

看到了吗 here 讨论原型中事件委托的更通用方法。在这一页下面有一个 implementation 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);
    });
})

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前