让元素可点击的关键是使浏览器承认其为有效热区，需设置cursor:pointer、tabindex="0"、足够padding、border及避免opacity:0等干扰因素。
直接加 onclick 不一定管用——区域没尺寸、没交互属性、没热区保障，点不中是常态。关键不是“绑事件”，而是让浏览器承认那块地方“该被点”。
为什么给 <div> 或 <span> 加 onclick 还是点不动
默认情况下，<div> 和 <span> 是非可聚焦元素，没有键盘支持，移动端可能忽略点击，CSS 里也常缺基础交互样式。
- 没设
cursor: pointer，用户看不出能点 - 没加
tabindex="0"，键盘 Tab 无法聚焦，辅助技术（如屏幕阅读器）不识别 - 内容为空或只有文本但无
padding，点击热区实际只有文字大小（手机上远小于 44×44px 最小触控标准） - 父容器有
overflow: hidden或transform，裁剪了事件捕获范围
<area> 配合 <map> 是唯一原生支持图像内多区域点击的方案
想在一张图里分区块跳转或触发动作，不用 JS 计算坐标，就靠 <map> + <area>。但它只对 <img> 生效，且坐标系是像素级、静态的。
-
<img usemap="#myMap">中的#myMap必须和<map name="myMap">完全匹配（大小写敏感） -
<area shape="rect" coords="10,20,100,80" href="/sun">：矩形坐标是x1,y1,x2,y2（左上→右下），不是宽高 - 必须为每个
<area>提供alt，否则 WCAG 2.1 失败；若不跳转，href改成javascript:void(0)并加role="button" - 不能用 CSS 改变
<area>样式——它不可渲染，仅作坐标映射；视觉反馈得靠 JS 监听click后操作其他元素
透明按钮或空容器要能点，padding 比 width 更关键
很多人用 width 和 height 强撑点击区域，结果在响应式断点里崩掉。真正决定热区大小的是 padding，尤其在移动端。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 显式写
background: transparent，别用background: none（浏览器 fallback 行为不一致） - 必须配
border（哪怕1px solid transparent），否则某些浏览器（如 Safari）会忽略点击穿透 -
opacity: 0会让整个元素不可点；要用visibility: hidden或display: none控制显隐，而不是靠透明度“隐藏”后还指望能点 - 如果区域背后有其他元素，加
pointer-events: none到遮罩层，避免拦截
表格整行/整表可点击时，event.target.closest() 是防误触的核心
给 <table> 加 onclick 看似简单，但点在 <th> 文字间隙、border-spacing 留白、甚至滚动条上，事件就失效或误判。
- 先用 CSS 清除干扰：
border-collapse: collapse+border-spacing: 0+padding: 0在td/th - JS 中别直接用
event.target === cell，改用event.target.closest('td, th')安全捕获真实点击单元格 - 移动端必须加
touch-action: manipulation到<table>，否则 iOS Safari 会等 300ms 判断是否双击缩放 - 如果要支持键盘操作（比如按 Enter 触发），
<table>本身不支持tabindex，得换成<div role="table">结构
最易被忽略的一点：可点击区域是否在视口内、是否被 transform 或 clip-path 裁剪、是否有 z-index 层叠遮挡——这些不会报错，但会让点击彻底静默。调试时优先检查 computed styles 里的 pointer-events 和 visibility 状态。
