解决方案

Question

我注意到，在单击期间鼠标从按钮的子元素移动时，<button>元素中的 onclick元素不会触发mousedown事件。换句话说：当mouseup和{{1}}事件不在同一元素上发生时 - 即使两者都是按钮的子元素。

点击/释放按钮文本的像素时，会发生同样的情况。

澄清我做了测试用例：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事件。）

Answer 2

您可以尝试添加此CSS样式：

button * {
    pointer-events: none;
}

子元素将忽略鼠标事件，点击将来自按钮元素本身。这是一个例子http://jsfiddle.net/Tetaxa/gx9B3/2/

Answer 3

您也可以通过纯CSS技巧解决它。只需将伪元素放在<button>上即可覆盖文字：

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

Webkit <button onclick =“”>在某些情况下不会触发</button>

解决方案

3 个答案: