FileNav

online
online: /HTML & CSS/Mobile_JavaScript.md

Mobile JavaScript

Device Events

Pointer Events

if (window.navigator.pointerEnabled) {
    // Pointer events are supported.
    canvas.addEventListener("pointermove", paint, false);
}
else {
    canvas.addEventListener("mousemove", paint, false);
}

function paint(event) {
    if (event.pointerType) {
        switch (event.pointerType) {
            case "touch":
                // A touchscreen was used
                break;
            case "pen":
                // A pen was used
                break;
            case "mouse":
                // A mouse was used
                break;
        }
    }
}

Touch Events

Testing

StackOverflow: Touchscreen media-queries

<script>
    // iOS //
    iOS_touch = typeof window.TouchEvent !== 'undefined' ? true : false;
    iPad_touch = typeof window.Touch !== 'undefined' ? true : false;

    // Mini Modernizr //
    document.documentElement.className += ("ontouchstart" in document.documentElement) ? ' touch' : ' no-touch';
</script>

Touch Libs

Simple Touch Events

Pollyfills & Utils