事件目标应该是锚点,而不是图像

Question

我正在使用Vanilla JS中的对话脚本.我遇到了视频图像上的点击事件的问题.即使是艰难的图像被锚标记包围,它也会在"trigger-dialog-open"事件中将图像显示为event.target.

这是HMTL:

<a class="trigger-dialog--open thumbnail" data-dialog-id="dialog-video" href="javascript:;">
    <figure>
        <img src="http://i.ytimg.com/vi/id/sddefault.jpg" alt="" />
    </figure>
</a>

这是JS中的事件:

var openTriggers = document.getElementsByClassName('trigger-dialog--open');
for (var i = 0; i < openTriggers.length; i++) {
    openTriggers[i].addEventListener("click", function (event) {
        this.openDialog(event.target.getAttribute('data-dialog-id'));
    }.bind(this), false);
}

事件处理程序想要知道anchors数据属性中的dialog-id.无法找到它,因为它认为图像是event.target,而不是实际的锚点.我怎么能纠正这个？谢谢!

Answer 1

使用event.currentTarget.在event.target被认为是该img元素,因为这是用户点击了什么.然后点击通过图像的容器冒泡.event.currentTarget为您提供点击处理程序实际绑定的元素.

(或者,如果您没有绑定this到可以this在单击处理程序中使用的其他对象,它也应该是当前目标.)