AutoSkill 创建全屏透明触摸蒙版

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

install

source · Clone the upstream repo

git clone https://github.com/ECNU-ICALK/AutoSkill

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/ECNU-ICALK/AutoSkill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/SkillBank/ConvSkill/chinese_gpt4_8/创建全屏透明触摸蒙版" ~/.claude/skills/ecnu-icalk-autoskill-9848d1 && rm -rf "$T"

manifest: SkillBank/ConvSkill/chinese_gpt4_8/创建全屏透明触摸蒙版/SKILL.md

source content

创建全屏透明触摸蒙版

创建一个覆盖全屏的透明蒙版，监听触摸事件，在用户触摸时打开指定 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