Question

制作可点击按钮的两种方法：

方法1：

<img src="image.png" alt="" id="btn_img" />

方法2：

<a id="btn_img"><img src="image.png" alt="" /></a>

除了CSS渲染差异（例如光标，IE生成的蓝色图像边框），如果我将click事件分配给ID btn_img，是否存在任何行为差异，例如：跨浏览器兼容性？最重要的问题，哪种方法更受欢迎？

添加事件的代码：

$('#btn_img').click(function() {
  alert('do something');
});

希望这个问题不会属于“基于意见”的范畴。

Answer 1

两个结果都是一样的。唯一的区别是click事件在第一种方法的图像中触发，在第二种方法的link标签中触发。因此，我们需要阻止a tag的默认行为，而不是img tag。无论如何，关于样式目的，用任何元素包装img tag比没有包装它更好，所以使用第二种方法更好。