单击按钮文本并释放它（但仍在按钮内）时，按钮元素未触发单击事件？

Question

在 WebKit 浏览器上（我在 Mac 上的 Chrome 和 Safari 上测试过），按钮元素的行为很奇怪：

文在这个小提琴http://jsfiddle.net/5ReUn/3/你做以下事情：

1. 当光标在 HTML 按钮文本上时按鼠标左键
2. 将光标（按下时）移动到按钮上没有文字的区域
3. 松开鼠标键

那么按钮元素上的点击事件就不会触发了！

HTML 非常简单：

<button id="button">Click</button>

而且 CSS 一点也不复杂：

button {
    display: block;
    padding: 20px;
}

点击捕获的JS：

button = document.getElementById('button');
button.addEventListener('click', function() {
    console.log('click');
});

我网站的许多访问者抱怨按钮不可点击。他们没有意识到点击时正在移动光标。

有人找到解决方法了吗？

Answer 1

原来是a bug in WebKit。

一种快速的非 JavaScript 解决方案是将文本包装在 SPAN 元素中并使其点击：

<button>
    <span>Click Me</span>
</button>

示例 CSS：

span {
    display: block;
    padding: 20px;
    pointer-events: none;   // < --- Solution!
}

由于该bug只出现在WebKit中，所以不支持pointer-events的浏览器可以忽略。

Answer 2

如果您没有找到其他解决方案，您可以使用mousedown 事件而不是click 事件。

这不是最佳解决方案，因为它的行为与正常情况不同。通常，当手指从鼠标按钮上松开时，用户期望该动作发生。不是当手指按住鼠标按钮时。

Answer 3

您在此处尝试拖动而不是单击它。因此，您可能想尝试mousedown 事件。

//This is same as click event
var down = false;
var button = document.getElementById('button');
var info = document.getElementById('info')
button.addEventListener('mousedown', function() {
    down = true;  
});


button.addEventListener('mouseup', function() {
    if(down){
        info.innerHTML += "click ";
        down = false;
    }
});

jsfiddle

Answer 4

您可以在按钮周围添加一个 div（例如，20px 的边距？），并绑定相同的 js/jquery。这样，如果他们会missclick(lol)，脚本仍然会触发。但是，我注意到，如果您在按下按钮时将鼠标拖离按钮，则该按钮不会执行任何操作（不仅仅发生在您的页面上，即使用 Facebook 登录按钮甚至本网站上的按钮尝试） .