V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
61162833
V2EX  ›  前端开发

前端问题求解(最强 AI ChatGPT 无法解决的问题)

  •  
  •   61162833 · 333 天前 · 1457 次点击
    这是一个创建于 333 天前的主题,其中的信息可能已经有所发展或是发生改变。
    一个网页横向展示若干个 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/
    6 条回复    2023-12-11 14:54:52 +08:00
    BwNVlwSq
        1
    BwNVlwSq  
       333 天前 via iPhone
    拖动的元素上增加一个透明层
    CopyRight
        2
    CopyRight  
       332 天前
    .rounded-reel-item {
    pointer-events:none;
    }
    llwxi
        3
    llwxi  
       332 天前
    拖动的时候给 a 标签添加 `pointer-events: none` css 属性,停止拖动的时候去掉。这里应该在 mouesmove 里面加,写一个阈值,鼠标点击之后移动的距离超过这个阈值,就判断为拖动,不然的话就是点击。判断为拖动的时候加上面说的 css 属性
    heishu
        4
    heishu  
       332 天前
    鼠标按下时不触发 a 标签跳转,在鼠标松开时判断是否为拖拽,不是拖拽就用 js 实现页面跳转
    AllenCai
        5
    AllenCai  
       332 天前
    4 楼的方案比较好
    LelouchXC
        6
    LelouchXC  
       332 天前
    同四楼,之前我写过的拖拽逻辑是:onmouseup 时鼠标的位置不变且和 onmousedown 的时间间隔不超过 200ms ,及判定为点击事件,否则判定为拖拽
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1045 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 19:49 · PVG 03:49 · LAX 11:49 · JFK 14:49
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.