Webkit <onclick button> does not work in certain situations

Question

I noticed that in Webkit the element <button>does not fire an event onclickwhen the mouse moves from / to the children of the button during a click. In other words, when events mousedownand mouseupdo not occur on the same element - even if both are subsidiaries of the button elements.

The same thing happens when you press / release to / from pixels of the button text.

To clarify, I did testcase : http://jsfiddle.net/gx9B3/

It works great in FireFox. Crash in Chrome 15 and QtWebkit 4.7.1

Is there any way around this? I need a solution specifically for Webkit , because my project is designed for this browser only.

Decision

I could solve this problem based on the method proposed by Jan Kuča (the solution I made). Some additional settings were needed, especially the introduction of a timer to avoid double clicks. Take a look at my fully working JSFiddle solution: http://jsfiddle.net/mwFQq/

Answer 1

mousedown document.body ( ). , mousedown HTMLButtonElement ( ), , mouseup ( , ), target mouseup. target mousedown, click :

var e = document.createEvent('Events');
e.initEvent('click', true, true);
button.dispatchEvent(e);

( WebKit, . preventDefault mousedown, click .)

Answer 2

CSS:

button * {
    pointer-events: none;
}

- , . http://jsfiddle.net/Tetaxa/gx9B3/2/

Answer 3

You can also solve it with a pure CSS trick. Just place the pseudo-element over <button>to cover the text:

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