在不手动单击按钮的情况下，是否可以使用js将按钮CSS类状态从".ripple“更改为”纹章:活动“？

Question

使用JavaScript的点击模拟并不适用于CSS伪类:active。在尝试了一些classList方法之后，它仍然不起作用。我只是想知道是否有什么可能的方法来实现这一点？

运行下面的片段，并单击按钮，以查看涟漪效应。波纹效应不会在模拟单击的包含的setInterval代码中自动重复。它只适用于按钮的真正点击：

​

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

btn.addEventListener(`click`, (e) => {
  console.clear();
  // try to manually set pseudo-class `:active` ?
  btn.classList.toggle('ripple', 'ripple:active');
  console.log('classList =', e.target.className);
});

setInterval(() => {
  // js simulator click doesn't work for css pseudo-class `: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>

​

参考文献

https://developer.mozilla.org/en-US/docs/Web/CSS/:active

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

Answer 1

到目前为止，根据API描述，这是不可能的。

:active CSS伪类表示用户正在activated的元素(例如按钮)。当使用mouse时，“激活”通常在用户按下主鼠标按钮时开始。

API接口

https://developer.mozilla.org/en-US/docs/Web/CSS/:active

https://drafts.csswg.org/selectors/#the-active-pseudo

https://html.spec.whatwg.org/multipage/semantics-other.html#concept-selector-active

Answer 2

您可以尝试使用js和css重新创建“活动”事件。

CSS：

.ripple {
    background-color: red;
}

.ripple:active, .ripple.active {
    background-color: green;
}

联署材料：

let btn = document.querySelector('.ripple');

btn.addEventListener('click', e => {
    btn.classList.add('active');
    setTimeout(() => {
        btn.classList.remove('active');
    }, 500);
});


setInterval(() => {
    console.log('click');
    btn.click();
}, 2000);