Triggering the ":active" pseudo-class on a touchscreen

Question

I'm currently developing a JavaScript application which will be deployed on a touchscreen kiosk running Chrome in kiosk mode.

I've noticed that when I use a mouse to click the buttons on the interface, the styles applied by the ":active" pseudo class is visible when the mouse is down. My problem is that the same button triggered by touching the screen does not trigger the active state.

Is there a way to make a touch event behave the same way as a mouse click?

Answer 1

Assuming the CSS :active pseudo-class isn't working, you'll probably need to use DOM events.

Do the "mousedown" and "mouseup" events work with touchscreens? Assuming they do, you could try something like this:

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

Then within your CSS, replace :active with [data-active], like so:

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

I don't think this will work quite the same... you may need to do some trickery to get child elements to work correctly, for instance.