Chrome vs. FF button click behavior

Question

I used the :active pseudoclass on my buttons to change the padding and border color when clicked. This visually mimics a button press. See an example.

Works in FF. In Chrome, though, the clicks don't always register. Specifically, if you click-and-hold on the text inside the button, then drag off the text (but still inside the button), the click will not fire. Same goes if you click in the padding, then drag into the text.

I've read weird things about buttons and padding in FF vs. Chrome but I can't figure out how to solve this problem.

Answer 1

Solution: Give it a Single Thing to Click

Adding a position: relative to the button and then overlaying it with a :before pseudo element like so:

button:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

Seemed to resolve the bug for me. See this fiddle. I imagine it resolves the bug (which I do think it is a bug) by giving a single "element" to focus upon when it is clicked.

Answer 2

Try this one: http://jsfiddle.net/uPZuJ/9/

Instead of checking for both mousedown and mouseup on the same element, check only for mousedown on your button and then check for mouseup on any other element.

Answer 3

Your button works great in Chrome. I have fixed the "click-and-hold on the text inside the button" thing by few lines of CSS and a attribute for IE. http://jsfiddle.net/uPZuJ/2/

EDIT: This is a screenshot of the bug I fixed:

Answer 4

Try this: http://jsfiddle.net/uPZuJ/22/ http://jsfiddle.net/uPZuJ/25/

This is how it works:

1. Initialize 'down' to false
2. mousedown on button causes 'down' to be true
3. On mouseup/click, if 'down' is true, append text 'click' and set 'down' to false

Clicking triggers a click.

Dragging the text into the padding triggers a click.

Dragging the padding into the text triggers a click.

Dragging from the inside to the outside does not trigger a click.

Dragging from outside to inside does not trigger a click.

Here is the code:

var down=false;
$("button").mousedown(function() {
    down=true;
});
$("button").mouseup(function() {
    if(down) {
        $("#clicks").append("<div>click</div>");
    }
    down=false;
});
$("button").click(function() {
    if(down) {
        $("#clicks").append("<div>click</div>");
    }
    down=false;
});