防止在离开拖动时在js中滚动时单击 [英] prevent click when leave drag to scroll in js
问题描述
我有一个水平滚动div也可以拖动。
此div中的元素是链接。每次我离开拖动时，它都会触发点击并将我发送到链接。
有没有一种方法可以阻止拖动后单击，但在不拖动时保持可用？
I have a horizontal scroll div that is also draggable. The elements which inside this div are links. every time I leave the drag it fire the click and send me to the link. Is there a way that I could prevent the click after leaving the drag but keep it available when not dragging?
下面是一个代码段：
const slider = document.querySelector('.wrapper');
let isDown = false;
let startX;
let scrollLeft;
slider.addEventListener('mousedown', (e) => {
isDown = true;
slider.classList.add('active');
startX = e.pageX - slider.offsetLeft;
scrollLeft = slider.scrollLeft;
});
slider.addEventListener('mouseleave', () => {
isDown = false;
slider.classList.remove('active');
});
slider.addEventListener('mouseup', () => {
isDown = false;
slider.classList.remove('active');
});
slider.addEventListener('mousemove', (e) => {
if(!isDown) return;
e.preventDefault();
const x = e.pageX - slider.offsetLeft;
const walk = (x - startX)*2;
slider.scrollLeft = scrollLeft - walk;
});
document.getElementsByClassName('.book').ondragstart = function() { return false; };
.wrapper {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
overflow: auto;
min-width: 100%;
}
.book {
width: auto;
height: 100vh;
min-width: 50vw;
}
.one {
background-color: #d07fe0;
}
.two {
background-color: #808888;
}
.three {
background-color: #83e7dc;
}
.four {
background-color: #edf7a8;
}
.five {
background-color: #e9d98f;
}
.six {
background-color: #fdd;
}
<body>
<div class="wrapper">
<a href="https://stackoverflow.com/" class="book one"></a>
<a href="https://stackoverflow.com/" class="book two"></a>
<a href="https://stackoverflow.com/" class="book three"></a>
<a href="https://stackoverflow.com/" class="book four"></a>
<a href="https://stackoverflow.com/" class="book five"></a>
<a href="https://stackoverflow.com/" class="book six"></a>
</div>
</body>
我将不胜感激。
谢谢！
nir
I would appreciate any help. thanks! nir
推荐答案
我可以建议一种方法。
定义功能 preventClick
const preventClick = (e) => {
e.preventDefault();
e.stopImmediatePropagation();
}
定义变量 isDragged 有条件地添加和删除事件侦听器。
Define a variable isDragged to conditionally add and remove event listeners.
let isDragged = false;
在 mouseup 事件中，输入2情况下， isDragged = false （在点击的情况下）或 isDragged = true （在拖动的情况下）
On mouseup event, you enter with 2 cases, isDragged = false(in case of click) or isDragged = true (in case of drag)
第一种情况：
删除阻止点击传播的eventListener
First case: Remove the eventListener that prevents click propagation
第二种情况：
添加防止点击传播的事件监听器。
Second case: Add the event listener that prevents click propagation.
试试下面的代码，让我知道是否有帮助。请注意，这不是经过优化的代码。我将为所有锚标记添加和删除事件处理程序，只是为了演示您可以采用的方法。
Try the below code and let me know if this helps. Please note that this is not an optimized code. I'm adding and removing event handlers for all anchor tags just to demonstrate the approach you can follow.
const slider = document.querySelector(".wrapper");
const preventClick = (e) => {
e.preventDefault();
e.stopImmediatePropagation();
}
let isDown = false;
var isDragged = false;
let startX;
let scrollLeft;
slider.addEventListener("mousedown", e => {
isDown = true;
slider.classList.add("active");
startX = e.pageX - slider.offsetLeft;
scrollLeft = slider.scrollLeft;
});
slider.addEventListener("mouseleave", () => {
isDown = false;
slider.classList.remove("active");
});
slider.addEventListener("mouseup", e => {
isDown = false;
const elements = document.getElementsByClassName("book");
if(isDragged){
for(let i = 0; i<elements.length; i++){
elements[i].addEventListener("click", preventClick);
}
}else{
for(let i = 0; i<elements.length; i++){
elements[i].removeEventListener("click", preventClick);
}
}
slider.classList.remove("active");
isDragged = false;
});
slider.addEventListener("mousemove", e => {
if (!isDown) return;
isDragged = true;
e.preventDefault();
const x = e.pageX - slider.offsetLeft;
const walk = (x - startX) * 2;
slider.scrollLeft = scrollLeft - walk;
});
document.getElementsByClassName("book").ondragstart = function() {
console.log("Drag start");
};
.wrapper {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
overflow: auto;
min-width: 100%;
}
.book {
width: auto;
height: 100vh;
min-width: 50vw;
}
.one {
background-color: #d07fe0;
}
.two {
background-color: #808888;
}
.three {
background-color: #83e7dc;
}
.four {
background-color: #edf7a8;
}
.five {
background-color: #e9d98f;
}
.six {
background-color: #fdd;
}
<body>
<div class="wrapper">
<a href="https://stackoverflow.com/" class="book one"></a>
<a href="https://stackoverflow.com/" class="book two"></a>
<a href="https://stackoverflow.com/" class="book three"></a>
<a href="https://stackoverflow.com/" class="book four"></a>
<a href="https://stackoverflow.com/" class="book five"></a>
<a href="https://stackoverflow.com/" class="book six"></a>
</div>
</body>
这篇关于防止在离开拖动时在js中滚动时单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
