阻止Chrome在拖动链接时将光标更改为地球标志

Question

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

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

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

我正在尝试在JavaScript中实现拖放文件系统界面。所有文件和文件夹都使用“a”标记标记。当我单击以拖动其中一个时，地球仪图标会出现并且会中断JavaScript事件（在这种情况下是JQuery的mousemove事件）。

有什么想法可以防止Chrome将拖动链接转换为地球仪吗？

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

- Chiraag Mundhe

---

它们必须标记为锚标签吗？ - FishBasketGordo

不过它们是真正的链接，行为与链接完全相同，因此应该将它们标记为锚点。如果没有人有解决方案，我就会将它们变成跨度或其他东西。 - Chiraag Mundhe

好的，您可能需要花更多的时间来思考这个问题，而不是在17分钟内对您的应用程序进行任何重大更改。 - FishBasketGordo

就我个人而言，我的 Chrome 没有出现这种情况。我使用的是 Chrome 12 版本。 - Stephen

我也是，但是这是Mac版本。可能应该提一下。 - Chiraag Mundhe

Answer 1

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

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

- Ghostoy

---

我在一个React应用程序中遇到了这个问题，它出现在一个没有<a>标签的<div>元素上或内部。当我添加onMouseDown={(event) => event.preventDefault()}时，可拖动的div（带有draggable=true和onDragStart和onDragEnd处理程序）停止可拖动，这并不奇怪，但是我该如何摆脱这个地球图标呢？ - anabella

@anabella 请看一下 https://dev59.com/PWQo5IYBdhLWcg3wI8nx#16283142，这是一个替代方案。 - mofojed

Answer 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

- mofojed

Answer 3

event.preventDefault() 可以阻止拖动操作，所以如果你仍然想要拖动，这里有一个在 Angular 中可行的解决方案：

public handleDragStart( event : DragEvent ) : void {
    const blankCanvas: any = document.createElement('canvas');
    event.dataTransfer?.setDragImage( blankCanvas, 0, 0);
    document.body?.appendChild( blankCanvas);
}

- Cory Lewis