爲什麼這個原型代碼是這樣工作的？

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（）父項。