Сообщение от рони
|
voraa,
понятно, может будет желание и время предложить свой вариант для pointer?
|
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
body {
position: relative;
}
.top-menu {
position: absolute;
touch-action: none;
}
</style>
</head>
<body>
<div class="menubar">
<span class="openmenu" onclick="openNav()">
Меню
</span>
</div>
<div id="mySidenav" class="top-menu">
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
<li>Пункт 4</li>
</ul>
<div class="menu-close" onclick="closeNav()">
х
</div>
</div>
<script>
function openNav() {
document.getElementById("mySidenav").style.left = "0";
}
function closeNav() {
document.getElementById("mySidenav").style.left = "-281px";
}
let touch_y, touch_x;
document.addEventListener("pointerdown", (event) => {
let target = event.target;
if (target = target.closest('.top-menu')) {
touch_y = event.clientY;
touch_x = event.clientX;
}
})
document.addEventListener("pointerup", (event) => {
let target = event.target;
if (target = target.closest('.top-menu')) {
let swap = (Math.abs(touch_y - event.clientY) > 3 || Math.abs(touch_x - event.clientX) > 3)
if (swap) {
closeNav()
}
}
})
</script>
</body>
</html>