Webkit <button onclick>在某些情况下不会触发

Question

我注意到在Webkit中,当单击期间鼠标从按钮的子元素移动时,<button>元素不会触发onclick事件.换句话说:当mousedownand mouseup事件发生在同一个元素上时 - 即使两者都是按钮的子元素.

单击/释放按钮文本的像素时,会发生相同的情况.

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

它在FireFox中运行良好.Chrome 15和QtWebkit 4.7.1失败

有没有解决的办法？我需要专门针对Webkit的解决方案,因为我的项目仅针对此浏览器.

解

我可以根据JanKuč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事件。）