jQuery + CSS cursor mousedown + Chrome = not working

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;
    }

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

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

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;
  }
});