触发“:active”触摸屏上的伪类

Question

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

我注意到，当我使用鼠标单击界面上的按钮时，“: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 */
}

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