Skip to content

Instantly share code, notes, and snippets.

@acdcjunior
Last active August 2, 2022 04:22
Show Gist options
  • Save acdcjunior/635c9acb3d6d42a1d0a1dd889716b7ff to your computer and use it in GitHub Desktop.
Save acdcjunior/635c9acb3d6d42a1d0a1dd889716b7ff to your computer and use it in GitHub Desktop.
TOUCH OR HOVER DEVICES?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Touch or Hover device?</title>
<style>
@media (hover: hover) {
#hover-hover { background: blue; color: white; }
#hover-hover::after { content: " YES"; }
#hover-none::after { content: " NO"; }
}
@media (hover: none) {
#hover-none { background: blue; color: white; }
#hover-hover::after { content: " NO"; }
#hover-none::after { content: " YES"; }
}
@media (pointer: coarse) {
#pointer-coarse { background: blue; color: white; }
#pointer-coarse::after { content: " YES"; }
}
@media not all and (pointer: coarse) {
#pointer-coarse::after { content: " NO"; }
}
#mouse:hover::after {
content: "(element is being hovered)";
display: block;
color: red;
}
</style>
</head>
<body>
<div id="hover-hover">device is (hover: hover)</div>
<hr>
<div id="hover-none">device is (hover: none)</div>
<hr>
<div id="pointer-coarse">device is (pointer: coarse)</div>
<hr>
<div id="touch-end"></div>
<hr>
<button id="mouse">HOVER or CLICK or TOUCH or TOUCH+HOLD here</button>
<div id="mouselog"></div>
<script>
document.getElementById('touch-end').innerHTML = 'touchend? ' + ('ontouchstart' in document.documentElement);
const m = document.getElementById('mouse');
const mlog = document.getElementById('mouselog');
m.addEventListener("mouseenter", (e) => mlog.innerHTML += '<br>mouseenter ' + e.timeStamp);
m.addEventListener("mouseleave", (e) => mlog.innerHTML += '<br>mouseleave ' + e.timeStamp);
m.addEventListener("mouseup", (e) => mlog.innerHTML += '<br>mouseup ' + e.timeStamp);
m.addEventListener("touchend", (e) => mlog.innerHTML += '<br>touchend ' + e.timeStamp);
m.addEventListener("click", (e) => mlog.innerHTML += '<br>click ' + e.timeStamp);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment