Encountering an unusual error where trying to add a "moving" class to an element while moving/dragging the mouse. Using jQuery 3.1.1 on Chrome 59.0.3071.115.
Simplified down to this example:
<html>
<head>
<style>
.thing {
display: block;
width: 10em;
height: 10em;
background: green;
}
.moving {
cursor: move;
}
</style>
<script src="jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="thing"></div>
<script>
$(document).ready(function(){
var $thing = $('.thing');
$thing.on('mousedown', function(e){
$thing.addClass("moving");
console.log("mousedown");
}).on('mouseup', function(e){
$thing.removeClass("moving");
console.log("mouseup");
});
});
</script>
</body>
</html>
A green box displayed on the page, triggering events when clicking and releasing the mouse on it.
Observations:
- Click on the green box -- The "moving" class applied to
div(visible in Chrome Developer Tools), but cursor remains arrow instead of expected move cursor. - Dragging without click -- Cursor stays as default arrow.
- Release click on the green
div-- Cursor briefly switches to move cursor then reverts to default if mouse moved slightly.
Attempted solutions from sources like with no success. Different CSS selectors, elements tried, issue persists outside jsfiddle environment.
Edit
Potential browser bug found, resolved by closing and reopening Chrome. Any known bugs in Chrome causing this behavior?