Stopping chrome from changing cursor to a globe while dragging a link

I have a standard link such as:

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

In Chrome, clicking and dragging on this link will result in the cursor changing to an arrow dragging a globe. The globe can be dropped on the url or bookmarks bar.

I am trying to implement a drag-and-drop filesystem interface in JavaScript. All files and folders are marked up in "a" tags. When 开发者_如何学编程I click to drag one, the globe icon appears and breaks the JavaScript event (in this case, JQuery's mousemove).

Any ideas on how to prevent Chrome from converting dragged links into the globe?

Edit: Using some well-placed event.preventDefault()'s actually does resolve the issue.

---

Try use event.preventDefault() in onmousedown

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

---

This is an old question, but still came up on the top. Doing event.preventDefault() as suggested in another answer prevents drag events from occurring. I found that setting the dataTransfer.effectAllowed property in ondragstart event to something like move gets rid of the globe being set. See https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/effectAllowed

I logged an issue against Chromium about not allowing the cursor to be set while a drag event is occurring: https://bugs.chromium.org/p/chromium/issues/detail?id=1232555

---

event.preventDefault() can block dragging actions so if you still want to drag here is a viable solution in Angular:

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