jQuery + CSS cursor mousedown + Chrome = not working

Question

I decided to make/test Cursors cross-browser, so far on Firefox its working perfect, but on Chrome - somewhat..

Now, the custom cursor shows, but when you click somewhere, it doesn't change, it does trigger mousedown event, but it doesn't change the cursor. I tried just mousedown(); and it changed the cursor. I guess the the mouseup event is causing this trouble.

$("body").mousedown(function() {
    $("body").addClass("clicked");
    console.log("down");
});
$("body").mouseup(function() {
    $("body").removeClass("clicked");
    console.log("up");
});

CSS

    body {
        cursor: url("../img/cursor1.cur"), default;
    }
    .clicked {
        cursor: url("../img/cursor2.cur"), default;
    }

[This should work properly](http://jsfiddle.net/kxuYq/1/). I'm guessing you just missed that your 'body' element has no layout... See @Sam s answer. — sg3s, Oct 03 '11 at 18:54
@sg3s http://www.highhigh.magnumweb.com.br/img/cursor1.cur and http://www.highhigh.magnumweb.com.br/img/cursor2.cur Don't be confused, this is not website I'm editing. — ncla, Oct 03 '11 at 19:03
See, now that makes the problem clear: http://jsfiddle.net/sg3s/kxuYq/8/ works as you said in FF, Chrome does nothing with the 2nd cursor state and IE manages to reverse the effect. — sg3s, Oct 03 '11 at 19:18

score 2 · Accepted Answer · edited May 23 '17 at 12:19

2

Try clicking and moving the mouse.

I think chrome only changes cursor on mousemove.

EDIT: This is a known bug, see Getting the browser cursor from "wait" to "auto" without the user moving the mouse

edited May 23 '17 at 12:19

Community

1
1

answered Oct 03 '11 at 19:12

timrwood

10,611
5
35
42

Ehh, what a shame. I guess I will have to use lame workaround. Thanks for helping. – ncla Oct 03 '11 at 19:19

score 0 · Answer 2 · answered Apr 04 '13 at 14:11

The problem is that you are using the global window.event object, and not jQuery's event object. window.event only works in some browsers, and it is not a W3C standard.

jQuery normalizes the event object so it's the same in all browsers. The event handler is passed that jQuery event object as a parameter. You should be using that.

$(".class_name").mousedown(function (e) {

  switch (e.which) {
    case 1: //leftclick
        //...
        break;
    case 3: //rightclick
        //...
        break;
  }
});

Sam · Answer 3 · 2011-10-03T18:48:46.663

0

I just tried out the following:

$('body').mousedown(function(){
  $(this).css('background-color', 'red');
});
$('body').mouseup(function(){
  $(this).css('background-color', 'green');
});

The result was as expected, click down -> red BG, click up -> green BG

BUT: this only happened, when i assigned css: html, body { height:100%; min-height:100%; } Without the CSS the events were not really working as "fluent" as they should be.

Little tip: with firebug (at least chrome dev tools) you can monitor events using the following snipped:

monitorEvents(  $$('body')[0] )

Hope this helped

edited Oct 03 '11 at 18:48

answered Oct 03 '11 at 18:26

Sam

16,435
6
55
89

I have no problems with mouse event. But thanks for trying to help. – ncla Oct 03 '11 at 18:37
ah ok, then i kinda misunderstood your problem, though i must admit i don't really understand your CSS, why not just assigning a:active cursor 2? Wheres the sense with the body.clicked? – Sam Oct 03 '11 at 18:50
I updated the CSS for you, since I didn't understand your question. But it doesn't change anything anyway. – ncla Oct 03 '11 at 19:00
ah okay, i see the problem now. It appears to have something to do with the cursor itself. My guess - and nothing more than this - is, that browsers just do specific stuff with the cursor when pressed. I can't get the "mousedown" even to change the cursor either, mouseup works. It just changes once i stop clicking the buttom. Keeping the mouse pressed is seen as "selecting-mode" so i get the selection "cursor:text"-cursor :S – Sam Oct 03 '11 at 19:16

jQuery + CSS cursor mousedown + Chrome = not working

3 Answers3