Kích hoạt lớp giả ": hoạt động" trên màn hình cảm ứng

Question

Tôi hiện đang phát triển một ứng dụng JavaScript sẽ được triển khai trên kiosk màn hình cảm ứng chạy Chrome ở chế độ kiosk.

Tôi đã nhận thấy rằng khi tôi sử dụng chuột để nhấp vào các nút trên giao diện, các kiểu được áp dụng bởi lớp giả ": hoạt động" sẽ hiển thị khi chuột bị tắt. Vấn đề của tôi là nút tương tự được kích hoạt bằng cách chạm vào màn hình sẽ không kích hoạt trạng thái hoạt động.

Có cách nào để tạo sự kiện chạm hoạt động giống như cách nhấp chuột không?

Answer 1

Giả sử CSS: lớp giả đang hoạt động không hoạt động, có thể bạn sẽ cần sử dụng các sự kiện DOM.

Sự kiện "mousedown" và "mouseup" có hoạt động với màn hình cảm ứng không? Giả sử họ làm, bạn có thể thử một cái gì đó như thế này:

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); 

Sau đó trong CSS của bạn, thay thế: hoạt động với [dữ liệu hoạt động], như vậy:

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

Tôi không nghĩ rằng điều này sẽ làm việc khá giống nhau ... bạn có thể cần phải làm một số thủ đoạn để có được các phần tử con làm việc chính xác, ví dụ.