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

StackOverflow https://stackoverflow.com/questions/1800061

  •  05-07-2019
  •  | 
  •  

题

这是我的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中的元素单击图像而不是锚点？我应该怎么做才能使用图像。

有帮助吗？

解决方案

虽然点击处理程序绑定到锚点，但会在图像上引发click事件。事件冒泡DOM，并调用锚点上的事件处理程序。 event.element（） 是该活动被提出的元素上

其他提示

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

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

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top