jaanus/forceclick.html

## forceclick.html
<html>
<head>
  <title>Events</title>
  <style type="text/css">

  div {
    font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
    padding-left: 1em;
  }

  .box {
    line-height: 3em;
    height: 3em;
    background-color: rgba(255, 0, 0, 0.2);
    margin-bottom: 1em;
  }

  </style>
  <script type="text/javascript"><!--

  document.addEventListener("DOMContentLoaded", function() {

    var box = document.querySelector(".box");
    var label = document.querySelector(".label");

    var fsm = StateMachine.create({
      initial: 'rest',
      events: [
        { name: 'mousedown',      from: 'rest',           to: 'mousedown' },
        { name: 'mouseup',        from: 'mousedown',      to: 'rest' },
        { name: 'forcemousedown', from: 'mousedown',      to: 'forcemousedown' },
        { name: 'forcemouseup',   from: 'forcemousedown', to: 'mousedown' }
      ], callbacks: {
        onforcemousedown: function() { label.innerHTML = "Force mouse down." },
        onmousedown: function() { label.innerHTML = "Mouse down." },
        onrest: function() { label.innerHTML = "Rest state." },
      }
    });

    box.addEventListener("webkitmouseforcedown", function(ev) {
      fsm.forcemousedown();
      console.log("mouseforcedown");
    });

    box.addEventListener("webkitmouseforceup", function(ev) {
      fsm.forcemouseup();
      console.log("mouseforceup");
    });

    box.addEventListener("mouseup", function(ev) {
      fsm.mouseup();
      console.log("mouseup");
    });

    box.addEventListener("mousedown", function(ev) {
      fsm.mousedown();
      console.log("mousedown");
    });

    box.addEventListener("webkitmouseforcewillbegin", function(ev) {
      console.log("mouseforcewillbegin");
      // if not preventing default, force-mousing on text fires Quicklook
      ev.preventDefault();
    });

  });

  --></script>
</head>
<body>
<div class="box">(Force) click me</div>
<div class="label">Status.</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/javascript-state-machine/2.0.0/state-machine.min.js"></script>
</body>
</html>
	<html>
	<head>
	<title>Events</title>
	<style type="text/css">

	div {
	font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
	padding-left: 1em;
	}

	.box {
	line-height: 3em;
	height: 3em;
	background-color: rgba(255, 0, 0, 0.2);
	margin-bottom: 1em;
	}

	</style>
	<script type="text/javascript"><!--

	document.addEventListener("DOMContentLoaded", function() {

	var box = document.querySelector(".box");
	var label = document.querySelector(".label");

	var fsm = StateMachine.create({
	initial: 'rest',
	events: [
	{ name: 'mousedown', from: 'rest', to: 'mousedown' },
	{ name: 'mouseup', from: 'mousedown', to: 'rest' },
	{ name: 'forcemousedown', from: 'mousedown', to: 'forcemousedown' },
	{ name: 'forcemouseup', from: 'forcemousedown', to: 'mousedown' }
	], callbacks: {
	onforcemousedown: function() { label.innerHTML = "Force mouse down." },
	onmousedown: function() { label.innerHTML = "Mouse down." },
	onrest: function() { label.innerHTML = "Rest state." },
	}
	});

	box.addEventListener("webkitmouseforcedown", function(ev) {
	fsm.forcemousedown();
	console.log("mouseforcedown");
	});

	box.addEventListener("webkitmouseforceup", function(ev) {
	fsm.forcemouseup();
	console.log("mouseforceup");
	});

	box.addEventListener("mouseup", function(ev) {
	fsm.mouseup();
	console.log("mouseup");
	});

	box.addEventListener("mousedown", function(ev) {
	fsm.mousedown();
	console.log("mousedown");
	});

	box.addEventListener("webkitmouseforcewillbegin", function(ev) {
	console.log("mouseforcewillbegin");
	// if not preventing default, force-mousing on text fires Quicklook
	ev.preventDefault();
	});

	});

	--></script>
	</head>
	<body>
	<div class="box">(Force) click me</div>
	<div class="label">Status.</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/javascript-state-machine/2.0.0/state-machine.min.js"></script>
	</body>
	</html>