Jquery Click Event Only Working After Moving the Mouse in Chrome

jQuery click event only working after moving the mouse

I think the problem is that you're putting the click handler on the label, not the button itself. I moved it to the button, and adjusted the code, and it works correctly.

$(function() {

    var uncheck = apple = banana = citron = 0;

    $(".fruitButtons").buttonset();
    $(".fruitButtons :radio").click(function(){

        var name = $(this).next("label").text();

        // see if button was previously checked
        // if yes set var 'uncheck' to 1
        if ((name == "Apple") && (apple)) uncheck = 1;
        if ((name == "Banana") && (banana)) uncheck = 1;
        if ((name == "Citron") && (citron)) uncheck = 1;
        apple = banana = citron = 0;

        if (!uncheck) {
            if (name == "Apple") apple = 1;
            if (name == "Banana") banana = 1;
            if (name == "Citron") citron = 1;

            // display name of currently checked button
            $(".status").text(name);
        }

        else {
            // unchecking the hidden input element
            $(this).prop("checked", false);

            // resetting the buttonset to its initial state
            $(this).button("refresh");

            $(".status").text("none");
            uncheck = 0;
       }
    });

});

FIDDLE

jQuery click event works only after the mouse is moved, while CSS hover is on (works as intended when hover is off)

Try to add "!important" in some of your css rules:

#yes, td.yes {
  background: green !important;
  background: linear-gradient(to top right, green, yellowgreen) !important;
}

and:

#no, td.no {
  background: red !important;
  background: linear-gradient(to bottom right, red, maroon) !important;
}

(good thing I had my mac handy!)

Fiddle here: https://jsfiddle.net/s8c7qm7g/

Hope this is what you were looking for.

jQuery mousemove() is called even if the mouse is still

The global event object is non-standard, so it only exists in some browsers, like IE (perhaps only in quirks mode) and appearently in Chrome.

Accept the event object as a parameter to the event handler:

var last_moved=0;
$(document).mousemove(function(e){
  var now = e.timeStamp;    
  if (now - last_moved > 1000) {
    $('#messages').append('mouse moved<br/>');
    last_moved = now;
  }
});

jsfiddle.net/bY3CC/5/

What to do if mousemove and click events fire simultaneously?

This behavior is odd, and it doesn't seem to occur universally (happens in Chrome/IE for me, but not FFX). I think you haven't gotten a straight answer because there isn't one really.

It's possible that the mouse is moved very slightly by the click action, but that's probably not it. Could just be a browser quirk. These don't even seem to be the same event since stopImmediatePropagation in click doesn't stop mousemove from firing. If you focus the element and hit a keyboard button, it will actually trigger click and only click.

Since this is so quirky, it seems like the only way to deal with it is times. As much of a kludge as this is, I do notice that click happens one millisecond before mousemove, so you could get close by comparing the click timestamp + 2 (or 10):

mousemove: function(e) {
    if ($(this).data('lastClick') + 10 < e.timeStamp) {

http://jsfiddle.net/gKqVt/3/

This is very specific, though. You should consider not having behavior that occurs immediately on mousemove since it's so frequent.

onClick event doesn't fire if you move mouse

Solution was to do a preventDefault() on onmousedown.

$(".button").mousedown(function(event){
    event.preventDefault();
    return false;
});

Chrome: Auxiliary Click Event with Middle Mouse Button not fired if page is scrollable

Kudos to iѕєρєня for pointing me into the right direction.

If I listen to the mousedown-Event too, check if it has been fired from a middle click and then prevent the default behaviour, everything seems to work fine.

Checkout the updated CodePen for the full solution.

I still think that this is kind of a hack. If somebody knows why Chrome does behave like this, I would be glad, if you'd share it here. ;)

jQuery + CSS cursor mousedown + Chrome = not working

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

---

Related Topics