force_touch.html

<pre id="forcelog">Waiting for force touch...</pre>
<div id="forceclick">&#x261e;</div>
<style type="text/css">
    #forcelog { font-family: "Source Code Pro", Consolas, Monaco, "Andale Mono", "Lucida Sans Typewriter", Courier, "Courier New", monospace; }
    #forceclick { display: block; width: 50%; padding: 10px; margin: 1em auto; background: gray; color: white; text-align: center; font-size: 3em; line-height: 3em; }
    #forceclick[mouse-down] { background: red; }
    #forceclick[force-down] { background: green; }
</style>
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
!(function ($) {
    var FORCE_BEGIN = "webkitmouseforcewillbegin"
    var FORCE_DOWN = "webkitmouseforcedown"
    var FORCE_UP = "webkitmouseforceup"
    var FORCE_CHANGE = "webkitmouseforcechanged"
    var obj = $("#forceclick")
    var output = $("#forcelog")
    var is_force_down = false;

    function handle_mouse_down (e) {
        e.preventDefault()
        obj.attr("mouse-down", true)
    }

    function handle_mouse_up () {
        obj.removeAttr("mouse-down")
    }

    function handle_force_down (e) {
        console.log("Caught force down")
        e.stopPropagation()
        obj.attr("force-down", true)
    }

    function handle_force_up () {
        console.log("Caught force up")
        obj.removeAttr("force-down")
    }

    function handle_force_change (e) {
        var force = e.originalEvent["webkitForce"]
        setTimeout(update_force.bind(force), 10)
    }

    function update_force () {
        var force = this;
        var is_force = !!obj.attr("force-down")
        var padding = Math.max(10, 15 * force) | 0
        output.text("is_force=" + is_force + " force=" + (((force * 100) | 0) / 100))
        obj.css({ "padding": padding + "px"})
    }

    function handle_force_begin (e) {
        console.log("Starting force")
    }

    obj.on("mousedown", handle_mouse_down)
    obj.on("mouseup", handle_mouse_up)
    obj.on(FORCE_BEGIN, handle_force_begin)
    obj.on(FORCE_DOWN, handle_force_down)
    obj.on(FORCE_UP, handle_force_up)
    obj.on(FORCE_CHANGE, handle_force_change)
}(jQuery))
</script>