为什么 onclick 事件没有在我的锚点上触发，其中包含图像？

Question

我正在使用 Zeroclipboard api 复制到剪贴板。我用 HTML 锚点制作了一个简单的测试页面，如下所示：

<a href="#" id="copy" >copy</a>

通过单击复制链接，文本将复制到剪贴板，所有 js 事件都会触发并正确记录到控制台中，但是当我将上面的示例更改为具有锚点内的图像以获得更好的用户体验：

<a href="#" id="copy" ><img src="copy.gif" alt="copy"/></a>

...代码不再工作，并且不会触发任何事件。

Answer 1

使用 CSS 将图像设置为 a 元素的背景图像。

#copy {
    background-image: url('copy.jpg')
    display: block
    width: XXXpx
    height: YYYpx
}

如果您希望 a 元素的行为更像跨度，则可以使用 display: inline-block。