Chrome vs. FF button click behavior - html

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:
Initialize 'down' to false
mousedown on button causes 'down' to be true
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;
});

Answer 5

After having playing around with your example, I think I got what happen behind the scene. By default click event will check both mousedown and mouseup event to be fired before it fires the callback. The problem is that you click on the text, your current target is the text now(it means mousedown event is already fired inside the text area, and it's waiting for mouseup event to be fired in order to complete a click event). However, you drag cursor out of the text and release mouse outside the text area, and your current target now is the Button, not the text anymore(mouseup event doesn't fire inside text area, but inside button area), so click event won't happen. However, if you click on the text and drag, and release your mouse inside text area, it will works just fine. This is the problem of event bubbling or capturing. In jQuery we have event.stopPropagation() or event.stopImmediatePropagation, but it just works for FF, not in Chrome.
What I suggest is using mousedown and mouseup event instead of click event.

Answer 6

Use "mouseup" instead of "click", it should work in ie, chrome and ff.
var elementName = "";
$("button").mouseup(function() {
if (elementName != "" && elementName == "BUTTON") {
$("#clicks").append("<span>click</span><br/>");
elementName = "";
}
});
$("button").mousedown(function() {
elementName = $(this).get(0).tagName;
});