Webkit не срабатывает в определенных ситуациях

Question

Я заметил, что в Webkit элемент <button> не вызывает событие onclick, когда мышь перемещается от / к дочерним элементам кнопки во время щелчка. Другими словами: когда события mousedown и mouseup не происходят на одном и том же элементе - даже если оба они являются дочерними элементами кнопки.

То же самое происходит при нажатии / отпускании в / из пикселей кнопки текст .

Чтобы уточнить, я сделал контрольный пример : http://jsfiddle.net/gx9B3/

Отлично работает в FireFox. Сбои в Chrome 15 и QtWebkit 4.7.1

Есть ли способ обойти это? Мне нужно решение специально для Webkit , потому что мой проект ориентирован только на этот браузер.

Решение

Я мог бы решить эту проблему, основываясь на методе, предложенном Jan Kuča (решение, которое я принял). Были необходимы некоторые дополнительные настройки, особенно введение таймера, чтобы избежать двойного щелчка. Взгляните на мое полностью рабочее решение на JSFiddle: 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>, чтобы покрыть текст:

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

Answer 3

Вы можете попробовать добавить этот стиль CSS:

button * {
    pointer-events: none;
}

Дочерние элементы будут игнорировать события мыши, и щелчок будет исходить от самого элемента кнопки. Вот пример http://jsfiddle.net/Tetaxa/gx9B3/2/