这是一个创建于 378 天前的主题，其中的信息可能已经有所发展或是发生改变。
一个网页横向展示若干个 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 2023-12-11 01:12:14 +08:00 via iPhone
拖动的元素上增加一个透明层
|
 |
2
CopyRight 2023-12-11 09:00:41 +08:00
.rounded-reel-item {
pointer-events:none; } |
 |
3
llwxi 2023-12-11 09:04:40 +08:00
拖动的时候给 a 标签添加 `pointer-events: none` css 属性，停止拖动的时候去掉。这里应该在 mouesmove 里面加，写一个阈值，鼠标点击之后移动的距离超过这个阈值，就判断为拖动，不然的话就是点击。判断为拖动的时候加上面说的 css 属性
|
 |
4
heishu 2023-12-11 09:32:29 +08:00
鼠标按下时不触发 a 标签跳转，在鼠标松开时判断是否为拖拽，不是拖拽就用 js 实现页面跳转
|
 |
5
AllenCai 2023-12-11 09:57:43 +08:00
4 楼的方案比较好
|
 |
6
LelouchXC 2023-12-11 14:54:52 +08:00
同四楼，之前我写过的拖拽逻辑是：onmouseup 时鼠标的位置不变且和 onmousedown 的时间间隔不超过 200ms ，及判定为点击事件，否则判定为拖拽
|
Select Language