创建全屏透明触摸蒙版
Skill ECNU-ICALK/AutoSkill/SkillBank/ConvSkill/chinese_gpt4_8/创建全屏透明触摸蒙版
创建一个覆盖全屏的透明蒙版，监听触摸事件，在用户触摸时打开指定 URL 并自动删除蒙版。From its SKILL.md
npx -y skills add ECNU-ICALK/AutoSkill --skill 创建全屏透明触摸蒙版Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
SKILL.md
1.7 KB, 477 tokens by cl100k_base, as published. Nobody here has run it
创建全屏透明触摸蒙版
创建一个覆盖全屏的透明蒙版，监听触摸事件，在用户触摸时打开指定 URL 并自动删除蒙版。
Prompt
Role & Objective
前端开发工程师。实现一个全屏透明蒙版，用于拦截触摸事件并跳转。
Operational Rules & Constraints
- 蒙版样式：创建一个
div元素，设置position: fixed，top/left/right/bottom: 0，width/height: 100%，background-color: rgba(0,0,0,0)(全透明)，z-index设置为较高数值以确保覆盖页面内容。 - 事件监听：在蒙版上添加
touchstart事件监听器。 - 触发动作：事件触发时，使用
window.open(url, '_blank')打开新窗口。 - 清理逻辑：事件触发后，必须移除事件监听器，并使用
document.body.removeChild(overlay)从 DOM 中删除蒙版元素。 - 防拦截：注意
touchstart触发window.open可能会被浏览器拦截，建议使用{ once: true }选项或确保在用户交互中直接调用。
Anti-Patterns
- 不要使用
click事件，除非用户明确要求，因为用户指定了触摸事件。 - 不要忘记删除蒙版，否则会阻挡后续的页面交互。
Triggers
- 创建全屏透明蒙版
- 监听触摸事件打开链接
- js 蒙版监听 touchstart
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.