mousemove上的javascript停止点击事件

Question

我有一个可拖动的父级，子级上有单击事件。当孩子开始被拖动时，我想取消/中止/停止它的点击事件，但也不想停止任何父事件。由于我不怎么使用jQuery，所以我非常感谢有一个普通的javascript解决方案。

很抱歉这个新手的问题，但我无法理解。

到目前为止，我得到的是：JSFiddle

// horizontal drag scroll for items
const itemScroll = document.querySelector('#itemScroll');
var isDown = false;
var startX;
var scrollLeft;
itemScroll.addEventListener('mousedown', (e) => {
isDown = true;
itemScroll.classList.add('active');
startX = e.pageX - itemScroll.offsetLeft;
scrollLeft = itemScroll.scrollLeft;
});
itemScroll.addEventListener('mouseleave', () => {
isDown = false;
itemScroll.classList.remove('active');
});
itemScroll.addEventListener('mouseup', () => {
isDown = false;
itemScroll.classList.remove('active');
});
itemScroll.addEventListener('mousemove', (e) => {
if (!isDown) return;
e.preventDefault();
const x = e.pageX - itemScroll.offsetLeft;
itemScroll.scrollLeft = scrollLeft - (x - startX);
});
// click an item to change bg-color
const items = document.querySelectorAll('.item');
for (var i = 0; i < items.length; i++) {
items[i].addEventListener('click', function (e) {
this.classList.toggle('active');
});
}

Answer 1

检测移动，在这种情况下"防止"；默认的单击行为使用全局变量编程。我们在mousedown时重置is_moved变量，并在mousemove时设置它。

// horizontal drag scroll for items
const itemScroll = document.querySelector('#itemScroll');
var isDown = false;
var startX;
var scrollLeft;
var isMoved = false;
itemScroll.addEventListener('mousedown', (e) => {
isDown = true;
isMoved = false;
itemScroll.classList.add('active');
startX = e.pageX - itemScroll.offsetLeft;
scrollLeft = itemScroll.scrollLeft;
});
itemScroll.addEventListener('mouseleave', () => {
isDown = false;
itemScroll.classList.remove('active');
});
itemScroll.addEventListener('mouseup', () => {
isDown = false;
itemScroll.classList.remove('active');
});
itemScroll.addEventListener('mousemove', (e) => {
if (!isDown) return;
isMoved = true;
e.preventDefault();
const x = e.pageX - itemScroll.offsetLeft;
itemScroll.scrollLeft = scrollLeft - (x - startX);
});
// click an item to change bg-color
const items = document.querySelectorAll('.item');
for (var i = 0; i < items.length; i++) {
items[i].addEventListener('click', function(e) {
if (!isMoved) {
this.classList.toggle('active');
}
});
}

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.mainCont {
width: 100%;
max-width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
scroll-snap-align: center;
}
#itemScroll {
cursor: pointer;
overflow-x: hidden;
}
#itemScroll.active {
cursor: grabbing;
}
.itemRow {
width: max-content;
min-width: 100%;
height: 100%;
max-height: 400px;
padding: 0 5vw;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 5rem;
transform-style: preserve-3d;
}
.item {
width: 100px;
height: 100px;
max-width: 400px;
max-height: 100%;
background-color: red;
}
.item.active {
background-color: green;
}

<div class="mainCont" id="itemScroll">
<div class="itemRow">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>