如何实现点击HTML页面内图片触发对应内容的alert弹窗

原代码问题排查 #

• 行内点击事件属性书写错误：HTML 行内点击事件属性为全小写的onclick，原代码使用的onMouseClick无法触发事件
• 事件函数重复定义，可维护性差：每新增一张图片就需要新增对应的事件处理函数，代码冗余度高
• 第三张图片存在重复定义id属性的语法错误，同时设置了id="bluesquare"和id="jamaica"，会导致id选择器无法正常识别

优化后可直接运行的代码 #

<html lang="zh-CN">
<head>
<title>图片点击提示</title>
</head>
<body>
<img id="blackcircle" src="31NXhN9iZoL._AC_SY355_.jpg" height="200" width="250" />
<img id="redtriangle" src="1200px-Red_triangle_with_thick_white_border.svg.png" height="200" width="250" />
<img id="bluesquare" src="download.png" height="200" width="250" />

<script>
// 图片ID与提示文本的映射关系，新增图片只需在此处添加对应配置即可
const imgTipConfig = {
  blackcircle: '你点击了黑圈图片',
  redtriangle: '你点击了红三角图片',
  bluesquare: '你点击了蓝方块图片'
}

// 批量为所有图片绑定点击事件
document.querySelectorAll('img').forEach(img => {
  img.addEventListener('click', function() {
    alert(imgTipConfig[this.id])
  })
})
</script>
</body>
</html>

代码优化说明 #

• 移除了冗余的行内事件属性，改用DOM标准事件绑定方式，代码逻辑更集中易维护
• 采用映射表存储配置，后续新增图片无需额外编写新的事件函数，仅需在imgTipConfig中新增对应ID和提示文本即可
• 修正了重复ID的语法错误，保证页面DOM解析正常
• 如果需要更灵活的配置，也可以将提示文本存放在图片的alt属性中，点击时直接读取this.alt即可弹出对应内容，无需单独维护配置表

内容的提问来源于stack exchange，提问作者Mike