html - 在触摸屏上触发 ":active" 伪类

Question

我目前正在开发一个 JavaScript 应用程序，它将部署在以信息亭模式运行 Chrome 的触摸屏信息亭上。

我注意到，当我使用鼠标单击界面上的按钮时，“:active”伪类应用的样式在鼠标按下时是可见的。我的问题是触摸屏幕触发的同一个按钮不会触发活动状态。

有没有办法使触摸事件的行为与鼠标单击相同？

Answer 1

假设 CSS :active 伪类不起作用，您可能需要使用 DOM 事件。

“mousedown”和“mouseup”事件是否适用于触摸屏？假设他们这样做，你可以尝试这样的事情：

addEventListener("mousedown", function (event) {
    if (event.target.setAttribute) {
        event.target.setAttribute("data-active", "");
    }
}, true);

addEventListener("mouseup", function (event) {
    if (event.target.removeAttribute) {
        event.target.removeAttribute("data-active");
    }
}, true);

然后在您的 CSS 中，将 :active 替换为 [data-active]，如下所示：

div[data-active] {
    /* blah blah */
}

我认为这不会完全一样......例如，您可能需要做一些技巧来让子元素正常工作。