在 WebKit 浏览器上(我在 Mac 上的 Chrome 和 Safari 上测试过),按钮元素表现得很奇怪:
文在这个 fiddle http://jsfiddle.net/5ReUn/3/您执行以下操作:
- 当光标位于 HTML 按钮文本上时按鼠标左键
- 将光标(按下时)移动到没有文本的按钮区域
- 松开鼠标键
那么按钮元素上的点击事件不会被触发!
HTML 非常简单:
<button id="button">Click</button>
而且 CSS 一点也不复杂:
button {
display: block;
padding: 20px;
}
点击捕捉JS:
button = document.getElementById('button');
button.addEventListener('click', function() {
console.log('click');
});
我网站的许多访问者提示按钮不可点击。他们没有意识到他们在点击时移动了光标。
有没有人找到解决方法?
最佳答案
原来是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
的浏览器可以忽略。
关于javascript - 单击按钮文本并释放它(但仍在按钮内)时,按钮元素未触发单击事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15679787/