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

前端之家收集整理的这篇文章主要介绍了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中,因此可以忽略不支持指针事件的浏览器.

原文链接:https://www.f2er.com/css/426987.html

猜你在找的CSS相关文章