V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member Sign In
This topic created in 868 days ago, the information mentioned may be changed or developed.
一个网页横向展示若干个 100x100 的链接方格，不换行，用 javascript 实现可以按住鼠标左右拖拽来实现内容的左右滚动。
https://jsfiddle.net/1r6k4b7n/
现在的问题是，如果拖拽滚动后，松开鼠标会直接打开鼠标下方的链接
需求是如果进行拖拽则不会激活方格的链接。
在我之前的理解中，只需要在 mouseup 事件中加一个阻止事件冒泡即可实现：
const stopDragging = () => {
isDragging = false;
e.stopPropagation(); //阻止事件冒泡
e.preventDefault(); //或者加这个，阻止默认事件
}
但事实不是如此，仍然会在拖拽后激活链接。
然后针对这个问题与 ChatGPT 进行了长时间对话，ChatGPT 给的方案就是在拖拽时移除所有 a 的 click 事件，然后 mouseup 后加回去，但实际的情况是打开链接是在 mouseup 后激活的，所以无效。
所以求助各位大神，就是拖拽滚动松开鼠标后不要打开链接，应该如何优雅的实现？
例子代码非常简单，放在： https://jsfiddle.net/1r6k4b7n/
https://jsfiddle.net/1r6k4b7n/
现在的问题是，如果拖拽滚动后，松开鼠标会直接打开鼠标下方的链接
需求是如果进行拖拽则不会激活方格的链接。
在我之前的理解中，只需要在 mouseup 事件中加一个阻止事件冒泡即可实现：
const stopDragging = () => {
isDragging = false;
e.stopPropagation(); //阻止事件冒泡
e.preventDefault(); //或者加这个，阻止默认事件
}
但事实不是如此，仍然会在拖拽后激活链接。
然后针对这个问题与 ChatGPT 进行了长时间对话，ChatGPT 给的方案就是在拖拽时移除所有 a 的 click 事件，然后 mouseup 后加回去，但实际的情况是打开链接是在 mouseup 后激活的，所以无效。
所以求助各位大神，就是拖拽滚动松开鼠标后不要打开链接，应该如何优雅的实现？
例子代码非常简单，放在： https://jsfiddle.net/1r6k4b7n/
 |
1
BwNVlwSq Dec 11, 2023 via iPhone
拖动的元素上增加一个透明层
|
 |
2
CopyRight Dec 11, 2023
.rounded-reel-item {
pointer-events:none; } |
 |
3
llwxi Dec 11, 2023
拖动的时候给 a 标签添加 `pointer-events: none` css 属性，停止拖动的时候去掉。这里应该在 mouesmove 里面加，写一个阈值，鼠标点击之后移动的距离超过这个阈值，就判断为拖动，不然的话就是点击。判断为拖动的时候加上面说的 css 属性
|
 |
4
heishu Dec 11, 2023
鼠标按下时不触发 a 标签跳转，在鼠标松开时判断是否为拖拽，不是拖拽就用 js 实现页面跳转
|
 |
5
AllenCai Dec 11, 2023
4 楼的方案比较好
|
 |
6
LelouchXC Dec 11, 2023
同四楼，之前我写过的拖拽逻辑是：onmouseup 时鼠标的位置不变且和 onmousedown 的时间间隔不超过 200ms ，及判定为点击事件，否则判定为拖拽
|
Select Language