应优先用<button>包裹<img>实现可点击图片，以支持键盘操作、焦点管理、无障碍访问；若直接绑定onclick需注意事件冒泡、移动端手势冲突及语义缺陷。
直接给 <img> 加 onclick 就行，但要注意事件冒泡和语义问题
图片本身不是交互式元素（不像 <button> 或 <a>），但浏览器允许它响应点击。最简方式就是写 onclick 属性或用 addEventListener 绑定：
<img src="logo.png" alt="logo" onclick="handleClick()">或者 JS 里：
document.querySelector('img').addEventListener('click', handleClick);但注意：如果图片在链接内、或父容器有 pointer-events: none，点击会失效；另外屏幕阅读器不会把纯 <img> 当可操作元素，无障碍支持弱。
img 外层套 <button> 是更健壮的交互方案
想让图片可点击又兼顾键盘操作（空格/回车触发）、焦点管理、语义正确，应该用按钮包裹：
<button type="button" onclick="doSomething()"><img src="icon.svg" alt="删除"></button>这样能天然支持：
- 键盘聚焦 + 回车/空格触发
- 禁用状态（
disabled）自动拦截事件 - 屏幕阅读器识别为“按钮”，配合
alt文本说明作用
<a href="#"> 包裹——除非真要跳转，否则会触发页面滚动或历史记录污染。
监听图片点击时，event.target 和 event.currentTarget 容易混淆
如果图片有子元素（比如带图标的 <picture> 或内联 SVG），或者你绑在父容器上，点击后 event.target 可能是子节点（如 <use> 元素），而 event.currentTarget 才是你绑定事件的那个元素。常见误判：
img.addEventListener('click', e => { console.log(e.target === img); // 不一定为 true！})稳妥做法是：
- 用
e.currentTarget确保拿到绑定对象 - 或用
e.target.closest('img')向上找最近的图片 - 避免直接依赖
e.target的 tagName 判断
移动端双击缩放和长按保存会干扰点击，得主动干预
iOS Safari 默认对图片启用双击缩放，Android 长按时弹出“保存图片”菜单，这些都会吞掉单次点击或导致误触。解决方法：
- 加 CSS：
img { pointer-events: auto; -webkit-user-drag: none; } - 阻止默认行为（慎用）：
img.addEventListener('click', e => { e.preventDefault(); // 仅当不需要默认行为时加 handleClick();}); - 更推荐：用
touchstart+ 节流判断是否为单击，避开系统级手势
立即学习“前端免费学习笔记（深入）”；
实际项目里，多数“可点击图片”本质是图标按钮，优先走<button> 包裹路线；只有明确需要原生图片语义（比如画廊缩略图）时，才单独绑定事件，并务必处理好移动端手势冲突和焦点逻辑。 
