为什么这个Prototype代码会像这样工作?
-
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。
不隶属于 StackOverflow