richardscarrott/event-order.html

## event-order.html
<!doctype html>
<html>
<head>
  <title>
		Event order
	</title>

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		.touch {
			display: block;
			background: red;
			width: 200px;
			height: 200px;
		}
	</style>
</head>
<body>

	<div class="touch">Touch Me</div>
	<button>Log events not fired</button>

	<script type="text/javascript">

		// Touch devices:
		// touchstart -> mouseover -> mousedown -> touchmove -> mousemove -> touchend -> mouseup -> click -> mouseout

		// Mouse devices:
		// mouseover -> mousemove -> mousedown -> mouseup -> click -> mouseout

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

			var el = document.getElementsByClassName('touch')[0],
				events = [
					'touchstart',
					'touchmove',
					'touchend',

					'mousedown',
					'mousemove',
					'mouseup',
					'click',
					// 'dblclick',

					'mouseover',
					'mouseout'
				],
				fired = [];

			events.forEach(function(val) {
				el.addEventListener(val, function(e) {
					console.log(val);

					// if (val === 'touchstart') {
					// 	e.preventDefault(); // prevents mouseover, mousedown, click and mouseout. If touchmove / mousemove is fired mouseover and mouseout won't be prevented...
					// }

					// if (val === 'mouseover') {
					// 	e.preventDefault(); // prevents nothing
					// }

					// if (val === 'mousedown') {
					// 	e.preventDefault(); // prevents nothing
					// }

					// if (val === 'touchmove') {
					// 	e.preventDefault(); // prevents mousemove
					// }

					// if (val === 'mousemove') {
					// 	e.preventDefault(); // prevents nothing
					// }

					// if (val === 'touchend') {
					// 	e.preventDefault(); // prevents mouseup, click
					// }

					// if (val === 'mouseup') {
					// 	e.preventDefault(); // prevents nothing
					// }

					// if (val === 'click') {
					// 	e.preventDefault(); // prevents nothing
					// }

					// if (val === 'mouseout') {
					// 	e.preventDefault(); // prevents nothing
					// }

					// Non-touch devices don't prevent any other events from firing other than
					// the event in question.

					fired.push(val);

				}, false);
			});

			var button = document.getElementsByTagName('button')[0];
			button.addEventListener('click', function() {
				console.log('EVENTS NOT FIRED:');
				events.forEach(function(val) {
					if (fired.indexOf(val) === -1) {
						console.log(val);
					}
				});
			}, false);

		});

	</script>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>
	Event order
	</title>

	<style type="text/css">
	* {
	margin: 0;
	padding: 0;
	}

	.touch {
	display: block;
	background: red;
	width: 200px;
	height: 200px;
	}
	</style>
	</head>
	<body>

	<div class="touch">Touch Me</div>
	<button>Log events not fired</button>

	<script type="text/javascript">

	// Touch devices:
	// touchstart -> mouseover -> mousedown -> touchmove -> mousemove -> touchend -> mouseup -> click -> mouseout

	// Mouse devices:
	// mouseover -> mousemove -> mousedown -> mouseup -> click -> mouseout

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

	var el = document.getElementsByClassName('touch')[0],
	events = [
	'touchstart',
	'touchmove',
	'touchend',

	'mousedown',
	'mousemove',
	'mouseup',
	'click',
	// 'dblclick',

	'mouseover',
	'mouseout'
	],
	fired = [];

	events.forEach(function(val) {
	el.addEventListener(val, function(e) {
	console.log(val);

	// if (val === 'touchstart') {
	// e.preventDefault(); // prevents mouseover, mousedown, click and mouseout. If touchmove / mousemove is fired mouseover and mouseout won't be prevented...
	// }

	// if (val === 'mouseover') {
	// e.preventDefault(); // prevents nothing
	// }

	// if (val === 'mousedown') {
	// e.preventDefault(); // prevents nothing
	// }

	// if (val === 'touchmove') {
	// e.preventDefault(); // prevents mousemove
	// }

	// if (val === 'mousemove') {
	// e.preventDefault(); // prevents nothing
	// }

	// if (val === 'touchend') {
	// e.preventDefault(); // prevents mouseup, click
	// }

	// if (val === 'mouseup') {
	// e.preventDefault(); // prevents nothing
	// }

	// if (val === 'click') {
	// e.preventDefault(); // prevents nothing
	// }

	// if (val === 'mouseout') {
	// e.preventDefault(); // prevents nothing
	// }

	// Non-touch devices don't prevent any other events from firing other than
	// the event in question.

	fired.push(val);

	}, false);
	});

	var button = document.getElementsByTagName('button')[0];
	button.addEventListener('click', function() {
	console.log('EVENTS NOT FIRED:');
	events.forEach(function(val) {
	if (fired.indexOf(val) === -1) {
	console.log(val);
	}
	});
	}, false);

	});

	</script>
	</body>
	</html>