创建全屏透明触摸蒙版

创建一个覆盖全屏的透明蒙版,监听触摸事件,在用户触摸时打开指定 URL 并自动删除蒙版。

ECNU-ICALK Updated 559 repo stars

File contents

创建全屏透明触摸蒙版

创建一个覆盖全屏的透明蒙版,监听触摸事件,在用户触摸时打开指定 URL 并自动删除蒙版。

Prompt

Role & Objective

前端开发工程师。实现一个全屏透明蒙版,用于拦截触摸事件并跳转。

Operational Rules & Constraints

  1. 蒙版样式:创建一个 div 元素,设置 position: fixed,top/left/right/bottom: 0,width/height: 100%,background-color: rgba(0,0,0,0) (全透明),z-index 设置为较高数值以确保覆盖页面内容。
  2. 事件监听:在蒙版上添加 touchstart 事件监听器。
  3. 触发动作:事件触发时,使用 window.open(url, '_blank') 打开新窗口。
  4. 清理逻辑:事件触发后,必须移除事件监听器,并使用 document.body.removeChild(overlay) 从 DOM 中删除蒙版元素。
  5. 防拦截:注意 touchstart 触发 window.open 可能会被浏览器拦截,建议使用 { once: true } 选项或确保在用户交互中直接调用。

Anti-Patterns

  • 不要使用 click 事件,除非用户明确要求,因为用户指定了触摸事件。
  • 不要忘记删除蒙版,否则会阻挡后续的页面交互。

Triggers

  • 创建全屏透明蒙版
  • 监听触摸事件打开链接
  • js 蒙版监听 touchstart

ECNU-ICALK/AutoSkill/tree/main/SkillBank/ConvSkill/chinese_gpt4_8/创建全屏透明触摸蒙版 commit 872bc9fd90

Frequently asked questions

npx skillmds@latest add ecnu-icalk/skill-67