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

Question

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

温家宝在这个小提琴http://jsfiddle.net/5ReUn/3/你做了以下事情:

1. 当光标位于HTML按钮文本上时,按鼠标左键
2. 将光标(按下时)移动到按钮区域,不带文本
3. 释放鼠标按钮

然后不会触发按钮元素上的click事件!

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

事实证明这是WebKit中的一个错误.

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

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

CSS示例:

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

由于该错误仅出现在WebKit中,pointer-events因此可以忽略不支持的浏览器.