点击图片实现模糊效果的核心是用CSS filter: blur()配合JavaScript切换状态类，通过classList.toggle()控制blur类增删，并同步更新aria-pressed属性以支持无障碍访问。
点击后让图片变模糊，核心是用 CSS 的 filter: blur() 配合 JavaScript 切换状态类，不依赖复杂库，几行代码就能实现。
基础实现：用 class 控制模糊开关
给图片默认不模糊，点击时添加一个类（比如 blurred），该类里启用 filter: blur(8px)。关键点是必须写全 transition，否则切换会突兀：
- HTML 中确保
<img>有可点击语义，建议加tabindex="0"支持键盘操作 - CSS 里定义
transition: filter 0.3s ease;，只过渡 filter，避免影响其他样式 - JS 用
classList.toggle()实现“点一下模糊、再点一下恢复”
防止误触发和体验优化
直接绑定 click 可能被误点（比如拖拽、双击），更稳妥的做法是：
- 监听
pointerdown+pointerup组合，排除长按或滑动 - 对移动端加
touch-action: manipulation;，减少 300ms 延迟 - 模糊时禁用图片拖拽：
img { -webkit-user-drag: none; user-drag: none; } - 如果图片在链接内，记得
event.preventDefault()防止跳转干扰
支持键盘与无障碍访问
仅靠鼠标点击不够友好。要让屏幕阅读器和键盘用户也能操作：
立即学习“前端免费学习笔记（深入）”；
- 给
<img>加role="button"和aria-pressed="false" - 监听
Enter和Space键事件，行为与点击一致 - 模糊生效后，同步更新
aria-pressed="true"，让辅助技术感知状态 - 可选：添加
focus-visible样式，让键盘聚焦时有可见轮廓
完整示例代码
把下面三段分别放进 HTML 文件的对应位置即可运行：
<!-- HTML -->
<img src="photo.jpg" alt="风景照" tabindex="0" role="button" aria-pressed="false">
<!-- CSS -->
img {
transition: filter 0.3s ease;
}
img.blurred {
filter: blur(10px);
}
<!-- JS -->
const img = document.querySelector('img');
const toggleBlur = () => {
const isBlurred = img.classList.toggle('blurred');
img.setAttribute('aria-pressed', isBlurred);
};
img.addEventListener('click', toggleBlur);
img.addEventListener('keydown', e => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
toggleBlur();
}
});
