Question

这是我的HTML：

（注意：为了简单起见，我没有在a上使用背景图片来向某人展示这是如何工作的）

<div class="foo">
    <ul>
        <li><a href="#" class="bar"><img src="bar.gif" /></a></li>
        <li><a href="#" class="baz"><img src="baz.gif" /></a></li>
    </ul>
</div>

我的JavaScript：

<script type="text/javascript">
    Event.observe(window, 'load', function() {
        $$('.foo a').each(function(a) {
            alert(a); // this is the anchor
            a.observe('click', fooClick);
    });

    function fooClick(event) {
        alert(event.element()); // this is the img
    }
</script>

为什么foo中的元素单击图像而不是锚点？我应该怎么做才能使用图像。

Answer 1

虽然点击处理程序绑定到锚点，但会在图像上引发click事件。事件冒泡DOM，并调用锚点上的事件处理程序。 event.element()是在

上引发事件的元素

Answer 2

你的问题有点困惑，“为什么foo中的元素会点击图像而不是锚点？我应该怎样做才能使用图像。”

你在最后一句话中的意思是“锚”吗？如果是这样，event.element（）是被单击的实际元素，不一定是分配了处理程序的元素。如果您需要锚点，您可以执行类似alert（event.element（）。up（'A'））的操作。

Answer 3

如果你将图像用作背景，你应该得到一个锚作为event.element（）。我认为event.element（）与event.target相同，这是一个首先接收事件的元素，并且该事件会从DOM中冒出来。所以删除（将其移动到css / background-image）或检查element（）parent。

为什么这个Prototype代码会像这样工作？

3 个答案: