JavaScript event.target 只报告 child (MooTools)

Question

我似乎从根本上弄错了。我有这个 HTML

<div id="thumbnails">
    <a href="#image-0">
        <img src="blabla-1.jpg" />
    </a>
    <a href="#image-0">
        <img src="blabla-1.jpg" />
    </a>
    <a href="#image-0">
        <img src="blabla-1.jpg" />
    </a>
</div>

和这个 JavaScript(正在使用的 MooTools 库)

document.id('thumbnails').getElements('a').each(function(image_link, image_link_index)
{
    image_link.addEvent('click', function(evt)
    {
        if (evt.target.get('tag') == 'a')
        {
            evt.stop();
            console.log('a tag', evt.target);
        }

        console.log(':-(', evt.target);
    });
});

奇怪的是我从来没有接触过那个元素。我确定我在这里误解了一些基本的东西。

您可以使用 http://jsfiddle.net/maryisdead/kHBE3/8/ 处的代码

Answer 1

为什么要重新发明轮子？事件委托(delegate)不是一件可以掉以轻心的事情——你应该使用内置的事件委托(delegate)(自 1.4.1 起)http://mootools.net/docs/core/Element/Element.Delegation

您的代码将更改为:

document.id('thumbnails').addEvent('click:relay(a)', function(evt, el) {
    evt.stop();
    console.log(':-)', el.get("tag") == 'a', this.get("tag") == 'a');
});

其中 relay() 伪可以采用您喜欢的任何选择器 - 例如。 a.foo 或 a[href=#]

请记住，在 1.2 中，事件委托(delegate)是实验性的，有些不完美 - 当涉及到 mouseover:relay() 或 focus:relay(input[type= text]) 您可能会在不同的浏览器中得到一些意想不到的结果 - 1.3.2 iirc 中解决的问题。此外，旧 ie6/7/8 中复选框和 radio 上的 change 事件恢复为 onpropertychange，并且可能不会冒泡。

在任何情况下，您的链接都无法作为 event.target 到达 anchor 链接，因为事件本身自上而下冒泡。也就是说，它将从 img > a > thumbnails 开始，但它不会为两者引发不同的事件 - 它在所有 3 个元素上都是相同的 event.target -> 这个 === 一个

不过你可以做的是 console.log(this.get("tag") === 'a'));//true - 即使初始目标是 this

的子级