为什么这个原型代码是这样工作的？

Question

这是我的html：

（注：我没有在一个只是简单显示有人计划如何运行使用背景图片）

<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

虽然点击处理程序绑定到定位点，但点击事件会在图像上产生。该事件冒泡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（）父项。