I have a DOM element that I want to drop "items" into. I want to give the user visual feedback with changing the cursor icon. But while mouse button is held down the cursor doesn't change. If I move the mouse no button, it changes. But not when I hold the button. Why? How can I achieve the desired cursor feedback for the user? I'm using Google Chrome.
<html>
<head>
<script type="text/javascript">
function Document()
{
var that = document.createElement("div");
that.style.backgroundColor = "#80ff80";
that.style.border = "1px solid black";
that.style.height = "90%";
that.style.width = "50%";
that.onmousemove = function (event)
{
//console.log(event.offsetX + ", " + event.offsetY);
if (Math.random() < 0.5)
that.style.cursor = "not-allowed";
else
that.style.cursor = "move";
return false;
}
return that;
}
function onLoadPage()
{
var doc = new Document();
document.body.appendChild(doc);
}
</script>
</head>
<body onload="onLoadPage()" />
</html>
1) Move mouse over the div. It will randomly change cursor icons.
2) Press mouse button and move mouse over the div. It will keep the last icon until you release mouse button.
Edit:
Chrome's console might produce this issue. Cursor change seems to work well when I hide the "developer tools". When I enable "dev tools", change tabs to any tab and back, the cursor wont change with mouse button held down.
