Button element not firing click event when clicking on button text and releasing off it (but still inside the button)?

Question

On WebKit browsers (I tested on Chrome and Safari on Mac), button element behaves weird:

Wen in this fiddle http://jsfiddle.net/5ReUn/3/ you do the following:

1. Press left mouse button while the cursor is over HTML button text
2. Move the cursor (while pressed) to an area of the button without text
3. Release the mouse button

Then the click event on the button element is not fired!

HTML is very simple:

<button id="button">Click</button>

And the CSS is not sophisticated at all:

button {
    display: block;
    padding: 20px;
}

JS for click catching:

button = document.getElementById('button');
button.addEventListener('click', function() {
    console.log('click');
});

Many visitors to my site complain that buttons are not clickable. They don't realize they are moving the cursor while clicking.

Has anybody found a workaround for this?

Solution 1

It turns out to be a bug in WebKit.

An quick non-JavaScript solution is to wrap the text in a SPAN element and make it click-through:

<button>
    <span>Click Me</span>
</button>

Example CSS:

span {
    display: block;
    padding: 20px;
    pointer-events: none;   // < --- Solution!
}

Since the bug appears only in WebKit, browsers that don't support pointer-events can be ignored.

Solution 2

Here you are trying to drag instead of clicking it. So, you may want to try mousedown event instead.

//This is same as click event
var down = false;
var button = document.getElementById('button');
var info = document.getElementById('info')
button.addEventListener('mousedown', function() {
    down = true;  
});


button.addEventListener('mouseup', function() {
    if(down){
        info.innerHTML += "click ";
        down = false;
    }
});

jsfiddle

Solution 3

If you don't find another solution, you can use the mousedown event instead of the click event.

This is not the best solution since it behaves different than normal. Normally the user is expecting the action to happen when the finger is released from the mouse button. Not when the finger is holding the mouse button down.

Comments

[Admin]

Where is your click handler? I do not see any js here

[Ernests Karlsons]

@silentboy, just updated my question with a JavaScript block. Clicks are caught when clicking-and-releasing on text part and when clicking-and-releasing on the non-text areas of the button. but crossing over doesn't work.

[Admin]

Will the event mousedown do? Please check someone has answered it already.

[Ernests Karlsons]

@silentboy as i commented on that reply, that's not a good UX on a button element.

[Johan]

Is the button big enough? Maybe you can do something to the layout/design to solve the problem. If you change the normal behavior of the button other users might be confused instead.

[Ernests Karlsons]

Yeah, someplace else i use A tags with the same styling. But in forms i'm bound to BUTTON and INPUT TYPE="BUTTON", if i don't want to introduce more JavaScript. The latter i can't use if i want to add icons and other stuff inside the button. I really think this could be a bug in WebKit. Is there perhaps a proprietary CSS property that could set the whole button as one indivisible object? That could fix this...

[Ernests Karlsons]

Buttons on this website don't use button HTML tag. It's essential for me, since i want to add other HTML elements inside the button tag (e.g., icons etc).. Moreover, i don't speak about the case when you release the cursor outside the button. It's just about releasing the cursor outside the button text, but still inside the button. DIV element won't helpt here, i guess.

[Ernests Karlsons]

mousedown wouldn't be a good UX. buttons react on mouseup. besides that would mean changing events in a quite large site on every button.

[Mr_Green]

@ErnestsKarlsons click event means hapenning of mousedown and mouseup event on the same element. What do want then?

[Ernests Karlsons]

Actually, i changed click event to mouseup event, and it works : / But I would still like a more elegant solution that doesn't involve changing JS functionality in the whole site.

[Ernests Karlsons]

dragging inside the same element isn't normally considered dragging.

[Mr_Green]

@ErnestsKarlsons check my updated post. I hope this is what you want.. but this is same to click?

[Ernests Karlsons]

This looks like an extremely complex solution for a simple problem. Imagine a web app, where you have to do this for EVERY button! I am starting to think it's a bug in WebKit.

[Mr_Green]

@ErnestsKarlsons check my updated fiddle and post. Also keep var as prefix while declaring variables. This will help in creating a cross browser code.

[Ernests Karlsons]

Thanx for your effort to continue with the code. But this kind of solution really doesn't work for any decent size web app.

[Mr_Green]

@ErnestsKarlsons yes you are right. Just a suggestion, keep it in a function and pass main arguments something like this: onButtonClick(elementID, otherId, text) everywhere. this could help you not to think about this code much and continue your work. Later, if you got the solution then just change the function.