拖动链接时阻止chrome将光标更改为地球仪答案

【问题标题】：Stopping chrome from changing cursor to a globe while dragging a link拖动链接时阻止chrome将光标更改为地球仪
【发布时间】：2011-10-09 21:58:27
【问题描述】：

我有一个标准链接，例如：

<a href="/test">Test</a>

在 Chrome 中，单击并拖动此链接将导致光标变为拖动地球的箭头。地球仪可以放在网址或书签栏上。

我正在尝试在 JavaScript 中实现拖放文件系统接口。所有文件和文件夹都用“a”标签标记。当我单击拖动一个时，地球图标出现并中断 JavaScript 事件（在本例中为 JQuery 的 mousemove）。

关于如何防止 Chrome 将拖动的链接转换为地球的任何想法？

编辑：使用一些适当的 event.preventDefault() 确实可以解决问题。

【问题讨论】：

它们必须标记为锚标签吗？
不，但它们是真正的链接，其行为与链接完全相同，因此应将它们标记为锚点。如果没有人有解决方案，我只会让它们跨度或其他东西。
好吧，在对应用进行任何重大更改之前，您可能需要提前 17 分钟提出问题。
FWIW 我的 chrome 不这样做。我正在使用 Chrome 12。
我也是，不过是Mac版。可能应该提到这一点。

标签： javascript css google-chrome drag-and-drop

【解决方案1】：

尝试在 onmousedown 中使用 event.preventDefault()

<a href="/test.js" onmousedown="event.preventDefault()">Test</a>

【讨论】：

我在 <div> 元素上的 React 应用程序中遇到了这个问题，它周围或内部没有 <a> 标签。当我添加 onMouseDown={(event) => event.preventDefault()} 时，可拖动的 div（带有 draggable=true 和 onDragStart 和 onDragEnd 处理程序）停止可拖动，这并不奇怪，但我还能如何摆脱这个地球图标？
@anabella 看看stackoverflow.com/a/16283142/3448018 的替代方案

【解决方案2】：

这是一个老问题，但仍然是最重要的。按照另一个答案中的建议执行event.preventDefault() 可以防止发生拖动事件。我发现将ondragstart 事件中的dataTransfer.effectAllowed 属性设置为move 可以摆脱正在设置的地球。见https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/effectAllowed

我记录了一个针对 Chromium 的问题，即在发生拖动事件时不允许设置光标：https://bugs.chromium.org/p/chromium/issues/detail?id=1232555

【讨论】：