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 */
}

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

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

1 个答案: