Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Logs out touch and mouse event order and records which events are actually prevented when `e.preventDefault` is called.
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.