在觸摸屏上觸發「：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 */ 
} 

我不認爲這會工作情況也是如此......例如，您可能需要做一些技巧來讓子元素正常工作。