这是一个创建于 669 天前的主题，其中的信息可能已经有所发展或是发生改变。
一个网页横向展示若干个 100x100 的链接方格，不换行，用 Javascript 实现可以按住鼠标左右拖拽来实现内容的左右滚动。
https://jsfiddle.net/1r6k4b7n/
现在的问题是，如果拖拽滚动后，松开鼠标会直接打开鼠标下方的链接
需求是如果进行拖拽则不会激活方格的链接。
在我之前的理解中，只需要在 mousep 事件中加一个阻止事件冒泡即可实现：
const stopDragging = () => {
isDragging = false;
e.stopPropagation(); //阻止事件冒泡
e.preventDefault(); //或者加这个，阻止默认事件
}
但事实不是如此，仍然会在拖拽后激活链接。
然后针对这个问题与 ChatGPT 进行了长时间对话，ChatGPT 给的方案就是在拖拽时移除所有 a 的 click 事件，然后 mouseup 后加回去，但实际的情况是打开链接是在 mouseup 后激活的，所以无效。
所以求助各位大神，就是拖拽滚动松开鼠标后不要打开链接，应该如何优雅的实现？
例子代码非常简单，放在： https://jsfiddle.net/1r6k4b7n/
https://jsfiddle.net/1r6k4b7n/
现在的问题是，如果拖拽滚动后，松开鼠标会直接打开鼠标下方的链接
需求是如果进行拖拽则不会激活方格的链接。
在我之前的理解中，只需要在 mousep 事件中加一个阻止事件冒泡即可实现：
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