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

Question

我目前正在开发一个JavaScript应用程序，该应用程序将部署在以Kiosk模式运行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中，替换：主动配合[数据活动]，就像这样：

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

我不认为这会工作情况也是如此......例如，您可能需要做一些技巧来让子元素正常工作。