javascript - 如何获取 iron-image 的点击事件以将 target.id 显示为图像而不是占位符 div？

Question

每当我对铁图像使用单击时，无论实际图像是否已加载，单击都会认为它来自占位符 div。

示例代码:

<iron-image id="imgFullSize"
                preload 
                on-click="myFunc"
                placeholder$="[[loadingImg]]"
                src$=[[fullSizeImageUrl]]></iron-image>

和函数:

myFunc: function(e){
console.log(e.target); // div#placeholder.faded-out.style-scope.iron-image
console.log(e.target.id); // "placeholder"
console.dir(e);
}

事情呈现如下(加载图像时):

<iron-image id="myImage" preload="" fade="" placeholder="loading.jpg" src="myimage.jpg">
    <div id="sizedImgDiv" role="img" class="style-scope iron-image" style="background-size: contain; background-position: center center; background-repeat: no-repeat; background-image: url("myimage.jpg");"></div>
    <img id="img" class="style-scope iron-image" hidden="" src="myimage.jpg">
    <div id="placeholder" class="faded-out style-scope iron-image" style="background-size: contain; background-position: center center; background-repeat: no-repeat; background-image: url("loading.jpg");"></div>
</iron-image>

Answer 1

逻辑图像组件要么嵌入到该 div 容器中，要么在某个时刻将 div 容器替换为图像标记。它有助于使用浏览器的开发人员工具查看最终的渲染源代码。

查看“imgFullSize”节点相对于占位符标记的放置位置。您可以通过以下方式附加事件:

document.getElementById('imgFullSize').onclick=function(){
console.log(this.id);
}