如何通过JS无需手动点击触发按钮.ripple:active涟漪效果

云原生阿岚

2026-8-27

问题描述

使用JavaScript模拟点击无法触发CSS伪类:active对应的样式效果，尝试调用classList相关方法操作类名后仍未实现目标，需要找到可行方案，无需手动点击按钮即可触发按钮.ripple的:active状态对应涟漪效果。
运行下方代码片段，手动点击按钮可以看到涟漪效果，但示例中内置的setInterval模拟点击代码无法自动重复触发涟漪，效果仅在按钮被真实点击时生效：

const btn = document.querySelector(`button`);

btn.addEventListener(`click`, (e) => {
  console.clear();
  // 尝试手动设置伪类 `:active` ?
  btn.classList.toggle('ripple', 'ripple:active');
  console.log('classList =', e.target.className);
});

setInterval(() => {
  // js模拟点击无法触发css伪类 `:active`
  btn.click();
}, 1000);

.ripple {
  position: relative;
  overflow: hidden;
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #000 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .2;
  transition: 0s;
}

<button class="ripple">ripple button</button>

解决方案

首先说结论：CSS原生:active伪类由浏览器交互行为控制，没有任何JS API可以直接手动设置元素的伪类状态，之前尝试用classList操作的思路从根上就走不通——伪类不属于元素class属性的范畴，而且示例里写的btn.classList.toggle('ripple', 'ripple:active')本身用法也错了：toggle方法第二个参数接收布尔值，用来控制强制添加/移除类，传入字符串会被当作真值处理，根本影响不到伪类。
要实现无需手动点击触发涟漪效果，不用死磕伪类，换个实现逻辑就行：

把原本绑定在:active上的样式，同步绑定到一个自定义的实体类上，比如.is-active，保证这个类的样式和:active完全一致
需要自动触发效果时，用JS给按钮加上这个类，等动画初始状态渲染完成后再移除类，就能完美复现和手动点击完全一致的涟漪效果

修改后的完整可运行代码：

.ripple {
  position: relative;
  overflow: hidden;
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #000 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

/* 给自定义类和:active加相同的样式，手动、自动触发效果完全统一 */
.ripple:active:after,
.ripple.is-active:after {
  transform: scale(0, 0);
  opacity: .2;
  transition: 0s;
}

const btn = document.querySelector(`button`);

// 抽离涟漪触发逻辑，手动、自动场景都能复用
function playRipple(el) {
  el.classList.add('is-active');
  // 等浏览器渲染完初始状态再移除类，保证过渡动画正常播放
  requestAnimationFrame(() => {
    el.classList.remove('is-active');
  });
}

// 手动点击正常触发
btn.addEventListener('click', () => {
  console.clear();
  playRipple(btn);
  console.log('当前类名：', btn.className);
});

// 自动触发直接调用方法即可，不需要模拟click事件
setInterval(() => {
  playRipple(btn);
}, 1000);

<button class="ripple">ripple button</button>

这个方案没有兼容性问题，也不会破坏原有手动点击的交互，自动触发的动画表现和真实点击没有任何区别。

补充：所有需要模拟CSS伪类效果（:hover、:active、:focus等）的场景，都可以用「自定义同名样式类+JS切换类名」的方案实现，没必要硬找直接操作伪类的API——这类API本身就不在Web标准的支持范围内。

内容的提问来源于stack exchange，提问作者xgqfrms