错误的滑动方向js

请告诉我，如果你从页面中间开始触摸移动并向右移动，那么console.log((会向右移动，但如果你向左移动并穿过屏幕中间，console.log(会显示相反的方向，尽管滑动方向相同。据我所知，这是因为touchstart坐标是从touchmove开始的地方固定的。如何修复此错误。(请参阅视频(。

https://youtu.be/_pB49S2BR2o

var initialX = null;
var initialY = null;
$("#content, .menu").on("touchstart", function(e) {
initialX = e.touches[0].clientX;
initialY = e.touches[0].clientY;
});
$("#content, .menu").on("touchmove", function(e) {
var diffX = initialX - e.touches[0].clientX;
var diffY = initialY - e.touches[0].clientY;
if (Math.abs(diffX) > Math.abs(diffY)) {
if (diffX > 0) {
console.log("Right");
} else {
console.log("Left");
}
} else {
return;
}
var width = parseInt($("body").css("width"));
clientX = e.touches[0].clientX;
width = width - clientX;
if (width >= 0 || width <= 375) {
$(".menu").css("left", "-" + width + "px");
} else {}
})

body {
margin: 0px;
overflow: hidden;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
.menu {
background: blue;
width: 100%;
height: 100%;
z-index: 1;
position: absolute;
left: -100%;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
#content {
width: 100%;
height: 100vh;
color: #000;
display: flex;
align-items: center;
justify-content: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<body>
<div class="menu" style="transition-duration: 0ms;">Menu slide</div>
<div id="content">
Content slide
</div>
</body>

const text = document.querySelector('#direction');
const cursorEl = document.querySelector('#cursorDir');
let lastX = null;
let active = false;
$("#content, .menu").on("touchstart", function(evt) {
active = true; 
});
$("#content, .menu").on("touchend", function(evt) {
active = false; 
});
$("#content, .menu").on("touchmove", function(evt) {
if (!active) return; // Run only on mousedown
if (lastX === null) {
// Set first value
lastX = evt.clientX;
return;
}
const diff = lastX - evt.clientX;
if (diff === 0) return; // Break if there's 0 pixels difference
console.log("direction: " + (diff > 0 ? "Left" : "Right"));
lastX = evt.clientX; // Set next value to check the difference
});

这就是您想要的吗？

注意：为了在浏览器中运行此操作，touchstart和touchmove被mousedown和mousemove取代

const text = document.querySelector('#direction');
const cursorEl = document.querySelector('#cursorDir');
let lastX = null;
let active = false;
cursorEl.addEventListener('mousedown', () => { active = true; });
document.documentElement.addEventListener('mouseup', () => { active = false; });
cursorEl.addEventListener('mousemove', (evt) => {
if (!active) return; // Run only on mousedown
if (lastX === null) {
// Set first value
lastX = evt.clientX;
return;
}
const diff = lastX - evt.clientX;
if (diff === 0) return; // Break if there's 0 pixels difference
text.innerHTML = "direction: " + (diff > 0 ? "Left" : "Right");
lastX = evt.clientX; // Set next value to check the difference
});

#cursorDir {
display: block;
width: 150px;
height: 150px;
}
#cursorDir {
background: blue;
}

Click and hold to activate
<div id="cursorDir"></div>
<div id="direction"><div>

相关内容

最新更新

热门标签：