前端问题求解（最强 AI ChatGPT 无法解决的问题）

[61162833]

一个网页横向展示若干个 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/

[BwNVlwSq]

拖动的元素上增加一个透明层

[CopyRight]

.rounded-reel-item {
pointer-events:none;
}

[llwxi]

拖动的时候给 a 标签添加 `pointer-events: none` css 属性，停止拖动的时候去掉。这里应该在 mouesmove 里面加，写一个阈值，鼠标点击之后移动的距离超过这个阈值，就判断为拖动，不然的话就是点击。判断为拖动的时候加上面说的 css 属性

[heishu]

鼠标按下时不触发 a 标签跳转，在鼠标松开时判断是否为拖拽，不是拖拽就用 js 实现页面跳转

[AllenCai]

4 楼的方案比较好

[LelouchXC]

同四楼，之前我写过的拖拽逻辑是：onmouseup 时鼠标的位置不变且和 onmousedown 的时间间隔不超过 200ms ，及判定为点击事件，否则判定为拖拽