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

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

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

>当光标悬停在HTML按钮文本上时,按鼠标左键
>将光标(按下时)移动到按钮区域,不带文字
>释放鼠标按钮

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

HTML非常简单：

CSS根本不复杂：

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

用于点击捕获的JS：

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

我网站的许多访问者都抱怨按钮无法点击.他们没有意识到他们在点击时移动光标.

有人为此找到了解决方法吗？

最佳答案

结果是a bug in WebKit.

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

CSS示例：

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

由于该错误仅出现在WebKit中,因此可以忽略不支持指针事件的浏览器.

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。