Strange Cursor Appears in Windows Browsers

Unity Engine
1

This app has one custom cursor, a hand, that shows when the mouse moves over a draggable object in the scene. This works correctly in Mac browsers, but sometimes another, different cursor appears in Windows browsers. The attached screen photo shows this cursor: ⦸. This new cursor appears only when the cursor should be a hand, and it seems to depend on exactly where on the screen the mouse is. As the user moves the mouse over the U-shaped draggable object, the cursor alternates between the correct hand cursor and the other cursor. Whenever the other cursor is visible, dragging doesn’t work.

I can’t reproduce this in Mac browsers or in the Unity editor. I don’t know where this other cursor is coming from, I’ve never seen it in Unity. Everything seems to be OK in the editor, the program correctly identifies when the mouse is over the object, there are no other colliders anywhere near the draggable object. Any ideas where this cursor is coming from or why it’s appearing?

6385206--711549--Windows Crusor.jpg
6385206--711549--Windows Crusor.jpg974×722 110 KB

2

I believe this is a Windows browser default action issue. By default, in Windows browsers if you start to drag any image in a browser, say the thumbnail of the screenshot you attached, the mouse cursor will by default turn into a cursor that tells you whether a drag and drop action is possible of the image to the location your mouse cursor is pointing at.

To remove/override this default behavior, there is a web-specific way to tell the web event that it should not perform its default action. From the top of my head, try adding something like follows in the generated build .html file (when you get it working, create a WebGL build template with the same code):

document.querySelector('canvas').addEventListener('mousedown', function(e) { e.preventDefault(); });

See this page for more JS code snippets to achieve this: javascript - Disable Drag and Drop on HTML elements? - Stack Overflow

3

Thanks, I’ll take a look at the HTML. However, what you described is NOT quite what’s happening. That screen shot shows the mouse OVER the object, no clicking or dragging. The opposite is true, when the cursor looks like that on mouseOver, dragging does NOT work.

Also, I don’t know if it’s relevant, but this is one of several of our web apps where objects in the scene can be dragged or otherwise manipulated. More or less the same code in all of them. This is the only one I’ve gotten reports of this cursor from.

4

Turns out this was a different Windows browser action, the browser’s response to a triple-click. That’s why the problem was intermittent, and I’ve not seen it in similar apps. In this particular app, the user clicks a number of objects before dragging. If they happen to click 3 times in quick succession, which they tend to do in this particular app, the browser sees it as a triple-click. The result is the cursor showing and the entire HTML table, which contains the app and a few graphics, gets selected (which explains the other elements on the page turning blue).

Adding style=“user-select: none;” to the table tag fixed the problem. I also set draggable to false for good measure.

<table width="1050px" border="0" cellspacing="0" cellpadding="0" draggable="false" style="user-select: none;">

1 Like