touch pseudo class emulate

touch pseudo class emulation to make toches more visible

by James Doyle

HTML

<button id="clicker">click this button</button>
<button id="toucher">touch this button</button>

CSS

body { margin: 20px; }
* {
    outline: none;
    -webkit-focus-ring-color: rgba(255,255,255,0);
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
button {
    color: white;
    text-shadow: 1px 1px rgba(0,0,0,0.3);
    background: #555;
    padding: 4px 14px;
    border-radius: 0 6px 0 6px;
    border: 1px solid #666;
    outline: none;
    box-shadow: inset 0 1px rgba(255,255,255,0.4), 0 2px #222;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

button[data-active] {
    background: #999;
    border: 1px solid #aaa;
    box-shadow: inset 0 1px rgba(255,255,255,0.4), 0 2px #555;
}

JavaScript

var clicker = document.getElementById('clicker');
var toucher = document.getElementById('toucher');

clicker.addEventListener("mousedown", function (event) {
    if (event.target.setAttribute) {
        event.target.setAttribute("data-active", "");
    }
}, true);

clicker.addEventListener("mouseup", function (event) {
    if (event.target.removeAttribute) {
        event.target.removeAttribute("data-active");
    }
}, true);

toucher.addEventListener("touchstart", function (event) {
    if (event.target.setAttribute) {
        event.target.setAttribute("data-active", "");
    }
}, true);

toucher.addEventListener("touchend", function (event) {
    if (event.target.removeAttribute) {
        event.target.removeAttribute("data-active");
    }
}, true);