CODEWITHSUNDEEP
javascriptjquerycssclick
Chris Nevill
Chris Nevill

Reputation: 6161

Button Click Issues

I'm using buttons which when clicked on move fractionally down.

.button:active {
    position: relative;
    top: 2px;
}

The problem I'm having is users occasionally click right at the top of button, either just under or on the buttons border. When the click goes down the button moves down and the cursor is no longer above the button. As a result a click is not actually registered. I've replicated this in a fiddle:

http://jsfiddle.net/DJNEb/3/

If you click right on the top edge of the button, the button moves, but the click event handler is not fired. I'm seeing this behaviour in IE, Firefox, Chrome.

How can I resolve this?

Upvotes: 1

Views: 103

Answers (2)

Andrea Ligios
Andrea Ligios

Reputation: 50281

Basically click() event is disturbed by the :active state moving objects.

Read more here.

Your solution by the way is a little different from the one of that answer;

Starting from the solution proposed by @cdanisor, you need to use mouseup() (in order to preserve the moving effect of the button AND to fire the event only when mouse is released)

Demo: http://jsfiddle.net/kEQjU/

<div id="alertMe">
    <div class="button red"> test</div>
</div>

$("#alertMe").mouseup(function() {
    alert("Handler for .click() called.");
});

EDIT

Obviously you can preserve the keyboard compatibility by using a button instead of a div, and binding the same function to the keyup event:

Demo: http://jsfiddle.net/kEQjU/1/

<div id="alertMe">
    <input type="button" class="button red" value="test" /> 
</div>

$("#alertMe").mouseup(function() {
alert("Handler for .click() called.");
});
$("#alertMe").keyup(function() {
alert("Handler for .click() called.");
});

Upvotes: 1

cosmin.danisor
cosmin.danisor

Reputation: 963

I would put the button inside a div and add the event on the div, this way you can keep your effect without over complicating your code.

Another way would be to treat the mousedown and mouseup events and check if the cursor position has changed

Upvotes: 1

Related Questions