CODEWITHSUNDEEP
javascriptjquerycssgoogle-chrome
Luke
Luke

Reputation: 20071

Change cursor while moving mouse

I'm having a strange error with trying to put a "moving" class on an element when moving/dragging the mouse. I'm using jQuery 3.1.1 on Chrome 59.0.3071.115.

I've simplified my problem 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>

This will display a green box in the page, and fires events when you mouse-down and mouse-up on it.

What happens is...

  1. Click the green box -- The "moving" class gets applied to the div (this can be seen in the Chrome Developer Tools: Elements tab), but the cursor stays the usual arrow. I would expect the cursor to change to the move cursor.
  2. While holding down the click, drag a bit -- The cursor still remains the default arrow.
  3. Release the click while on the green div -- The cursor switches to the move cursor for a moment, but switches back to the default arrow if the mouse is moved at all.

I've tried solutions like https://stackoverflow.com/a/16172027/1766230, and others, without luck. I've tried various combinations of selectors in the CSS, various elements, etc. Strangely when attempting this in jsfiddle everything works correct, but with this content as a stand-alone HTML file, I see the error.

Edit

Turns out it must have been a browser bug, because when I closed Chrome and re-opened it, this began working as expected. Is anyone aware of this kind of bug in Chrome?

Upvotes: 0

Views: 2999

Answers (4)

Subhash Labana
Subhash Labana

Reputation: 95

$(document).ready(function() {
    // Add a mousemove event listener to the document
    $(document).on('mousemove', function(event) {
      // Change the cursor style to 'pointer'
      $('body').css('cursor', 'pointer');

      // Additional logic can be added based on the mouse position or other conditions
      // For example, change cursor to 'default' when not over a specific area
      // if (event.clientX < 100 || event.clientY < 100) {
      //   $('body').css('cursor', 'default');
      // }
    });

In this example, the cursor style is changed to 'pointer' when the mouse is moved. You can customize the cursor style by replacing 'pointer' with other valid CSS cursor values such as 'default', 'pointer', etc.

Upvotes: 0

Dampfpfeife
Dampfpfeife

Reputation: 1

Found this contribution as I ran into the same problems as described above - but while using standard Javascript instead of jquery. And now - more than six years after the initial post and with Chrome version 120 - the solution is still the same: Close the browser and restart it - and the problems are gone. Simply reloading the page (with or without clearing the cache) doesn't help - you really have to restart Chrome. So the bug is evidently still in the code - just as information, if anybody else has the same problems ...

Upvotes: 0

l2aelba
l2aelba

Reputation: 22217

Just an alternative : (without JS)

  • Use tabindex
  • Selector is :active:hover

.thing {
  display: block;
  width: 10em;
  height: 10em;
  background: green;
  user-select: none;
  outline: none;
}

.thing:active:hover {
  cursor: move;
  background: red;
}
<div class="thing" tabindex="1"></div>

Upvotes: 1

prasanth
prasanth

Reputation: 22500

drag != mousedown

Its a browser default dragging behaviour .Add the drag event with mousedown

$(document).ready(function() {
  var $thing = $('.thing');
  $thing.on('mousedown ,drag', function(e) {
    $thing.addClass("moving");
    console.log("mousedown");
  }).on('mouseup', function(e) {
    $thing.removeClass("moving");
    console.log("mouseup");
  });
});
.thing {
  display: block;
  width: 10em;
  height: 10em;
  background: green;
}

.moving {
  cursor: move;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="thing"></div>

Upvotes: 0

Related Questions