Webkit的＆LT;按钮的onclick＆GT;不火在某些情况下 [英] Webkit <button onclick> does not fire in certain situations

问题描述

我注意到，在Webkit内核的＆LT;按钮＆GT; 元素不火的的onclick 事件当鼠标从/到按钮的子元素点击期间移动。与其他词：在鼠标按下和鼠标松开事件不会发生在相同的元素 - 即使双方都是孩子按钮。

I noticed that in Webkit the <button> element does not fire the onclick event when the mouse is moved from/to child elements of the button during the click. With other words: when the mousedown and mouseup events do not happen on the same element - even if both are children of the button.

点击/释放上时，同样的情况/缩小按钮的文本的。

The same happens when clicking/releasing on/out of the pixels of the button text.

要澄清我做了一个测试用例： http://jsfiddle.net/gx9B3/

在Firefox正常工作。无法在Chrome 15和QtWebKit的4.7.1

It works fine in FireFox. Fails in Chrome 15 and QtWebkit 4.7.1

有没有办法解决？我需要一个解决方案专为Webkit的，因为我的项目是针对该浏览器只。

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

我可以基于扬Kuča（在I接受的解决方案）建议的方法解决这个问题。一些额外的调整是必要的，尤其是引入一个定时器，以避免双重点击。看看在我的jsfiddle完全工作的解决方案：
http://jsfiddle.net/mwFQq/

I could solve this problem based on the method suggested by Jan Kuča (the solution I accepted). Some additional tweaks were necessary, especially introducing a timer to avoid double clicks. Have a look at my fully working solution at JSFiddle: http://jsfiddle.net/mwFQq/

推荐答案

您可以设置在 document.body的鼠标按下监听器C $ C>（修复整个页面上的问题）。你会检查鼠标按下事件起源于一个 HTMLButtonElement （或任何其子元素），如果它确实，你设置了鼠标松开监听器（按钮，因此它不会有泡沫太多），将检查目标在鼠标松开事件的属性。如果它被包含在该按钮并从目标的鼠标按下事件的不同，你火了点击事件是这样的：

You could set up a mousedown listener on document.body (to fix the problem on the whole page). You would check if the mousedown event originated from an HTMLButtonElement (or from any of its child elements) and if it did, you set up a mouseup listener (on the button so it does not have to bubble too much) that will check the target property of the mouseup event. If it is contained in the button and is different from the target of the mousedown event, you fire a click event like this:

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

（执行此操作仅适用于基于WebKit的浏览器，这样你就不会在其他浏览器得到多个点击事件。或者，你可以调用的 preventDefault 方法在鼠标按下的事件，因为它应该也prevent烧制点击的事件。）

(Do this only for WebKit-based browsers so that you don't get multiple click events in other browsers. Or you could call the preventDefault method of the mousedown event as it should also prevent firing the click event.)

这篇关于Webkit的＆LT;按钮的onclick＆GT;不火在某些情况下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！