JavaScript event.target仅报告子（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

你为什么要重新发明轮子？事件委托不是一件容易接受的事情 - 你应该使用内置的事件委托（自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或[href =＃]

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

在任何情况下，你的作为event.target的锚链接都无法作为事件本身自上而下的BUBBLES。即它将从img > a > thumbnails开始，但它不会为两者引发不同的事件 - 它在所有3个元素上都是相同的event.target - ＆gt;这个=== a

尽管console.log(this.get("tag") === 'a')); // true

答案 1 :(得分：1)

如果您要在代码中使用event，则需要使用名为event的参数，而不是evt。解决这个问题，你应该好好去。

我不知道它为什么不起作用。事件是在链接内的图像上触发，而不是链接本身，这只是很奇怪。

我唯一可以建议（它没有修复它）是一种更简单的方法来选择元素。

$$('#thumbnails > a').each(...

我也尝试重写相同的代码以使用我自己的工具包，这就像jQuery一样。它仍然存在同样的问题，这意味着它是特定于JavaScript的，而不是特定于MooTools的。

您可以尝试if (evt.target.parentNode.get('tag') == 'a')

Answer 2

如果您要在代码中使用event，则需要使用名为event的参数，而不是evt。解决这个问题，你应该好好去。

我不知道它为什么不起作用。事件是在链接内的图像上触发，而不是链接本身，这只是很奇怪。

我唯一可以建议（它没有修复它）是一种更简单的方法来选择元素。

$$('#thumbnails > a').each(...

我也尝试重写相同的代码以使用我自己的工具包，这就像jQuery一样。它仍然存在同样的问题，这意味着它是特定于JavaScript的，而不是特定于MooTools的。

您可以尝试if (evt.target.parentNode.get('tag') == 'a')