必须用 display: none 而非 visibility: hidden，因后者仍占位、可误点、影响 SEO 和 JS 计算；关闭逻辑需防 DOM 时机错误，推荐事件委托与独立函数；移动端按钮应增大热区并设最小尺寸；关后复现需排查 localStorage、第三方脚本及 service worker。
直接用 position: fixed + 内联 onclick 就能做出基础可关闭广告，但真上线时多数会失效或干扰体验——问题不在“能不能写出来”，而在“关不掉”“挡操作”“被搜索引擎降权”这三类实际踩坑点。
用 style="display:none" 还是 style="visibility:hidden"？
必须用 display: none。前者彻底移出渲染流，后者只是“透明但占位”，用户仍可能误点、屏幕阅读器仍会读到、SEO 仍会抓取。
-
visibility: hidden下，offsetHeight和getBoundingClientRect()仍返回真实尺寸，JS 动画/碰撞检测容易出错 - 移动端 Safari 对
visibility: hidden的 fixed 元素有重绘延迟，滑动时可能出现“闪现残留” - 如果广告需支持“关闭后 24 小时不再显示”，记得在
display: none后同步写入localStorage.setItem('ad_closed', Date.now())
onclick="this.parentElement.style.display='none'" 失效的常见原因
这个写法看似简单，实际运行中常因 DOM 加载时机或父级结构变动而失败。比如广告嵌在 <article> 里，而 article 被 JS 动态替换过，this.parentElement 就指向了错误节点。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 优先用事件委托：给
body绑定click，用event.target.matches('.ad-close')判断是否点中关闭按钮 - 避免内联 JS，把逻辑抽到独立函数，如
function closeAd() { document.getElementById('ad-banner').style.display = 'none'; } - 如果广告是通过
innerHTML插入的，确保插入后立即调用addEventListener，不能依赖 HTML 里的onclick
移动端右上角关闭按钮点不到？试试这个定位组合
小屏下右上角物理空间太小，手指点击误差大，单纯靠 right: 10px; top: 10px; 不够可靠。
立即学习“前端免费学习笔记（深入）”；
- 改用
bottom: 10px; right: 10px;+transform: translate(50%, 50%)把按钮锚点移到右下角，再反向偏移，实际点击热区更大 - 关闭按钮本身至少设
min-width: 36px; min-height: 36px;，满足 WCAG 2.1 触摸目标最小尺寸要求 - 加
touch-action: manipulation防止 iOS Safari 在点击时触发双击缩放
真正难的不是让广告“浮起来”或“关掉”，而是关掉之后它别再自己回来——检查 localStorage 是否被跨域 iframe 清空、确认关闭逻辑没被第三方统计脚本覆盖、留意 service worker 缓存了旧版 HTML。这些地方一漏，用户点十次 ×，照样第十一次还弹。
