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

Question

在 WebKit 浏览器上(我在 Mac 上的 Chrome 和 Safari 上测试过)，按钮元素表现得很奇怪:

文在这个 fiddle 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的浏览器可以忽略。