why does this button's "click" not work on some regions of the button?

Question

Why does my button's click event not register when the mouse pointer is in the spot shown in the screenshot below? I've created a jsFiddle for you to test it out. Make sure to check your browser's console for feedback.

http://jsfiddle.net/27kRH/

Here is my code, I'm using jQuery

var clickCounter = 0;

$('button').click(function(){
    clickCounter++;

    console.log('times clicked: ' + clickCounter);
});

Answer 1

This issue is that a click is a mousedown + mouseup. When you click on that area, you are in the portion of a subelement on mousedown, but on mouseup you are in the portion of the parent element, so no element gets the full click. Not sure what the best way is to fix it, but that is the problem.

.logInBtn:active{
    /*top:2.2em;*/
}

With that commented out it works.

Answer 2

I think Dave explained the problem well You are moving the element on its active state, moving the element on the active state is causing the mousedown to go to one element and the mouseup to go to another element, therefore, a click is not firing because the OS will only fire a click if the mouseup and mousedown are on the same element.

I think the best solution is to simplify your code a lot, and let the button handle the active state, you had styles that were affecting the active look of the button. The following CSS/HTML still has an active look and doesn't move the button from under your mouse, which is a bad idea from a UX perspective.

<button id="signUpLogIn-logInBtn" class="logInBtn">
    <img src= "http://s10.postimg.org/z9yrvulut/log_In_Icon.png"/>
     Add One<p class="logInBtnSub">See Console</p>
</button>


.logInBtn {
    font-size: 1.4em;
    text-transform: uppercase;
    font-weight: 700;
    background-color: #c6c6c6; 
    box-shadow: 0 8px #878787;
    border-radius: 10px;
    color: #402a3e;
    cursor: pointer;
    text-align: center;
 }

.logInBtn img {
    width: 50px;
    height: 50px;
    display: block;
    margin: auto;
}
.logInBtnSub{
    font-size: 0.6em;
    color: #878787;     
}

Here are a few workarounds

• Don't use a button, use a div (This works everywhere but doesn't use a button, so you don't have an active state)
• Don't use click, use mouseup (This doesn' work at the very top of the button, but works everywhere else)
• Don't move the button around on its active state, if you really want the active state to look different, play around with borders/margin padding instead.
• Use pointer-events: none for elements within the button This works in the latest browsers I tested IE9, FF, and Chrome (credits to vals)