Question

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

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

当光标悬停在HTML按钮文本
将光标（按下时）移动到按钮区域，不带文字
释放鼠标按钮

然后不会触发按钮元素上的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

原来是a bug in WebKit。

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

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

示例CSS：

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

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

Answer 2

您尝试拖动而不是点击它。因此，您可能希望尝试mousedown事件。

//This is same as click event
var down = false;
var button = document.getElementById('button');
var info = document.getElementById('info')
button.addEventListener('mousedown', function() {
    down = true;  
});


button.addEventListener('mouseup', function() {
    if(down){
        info.innerHTML += "click ";
        down = false;
    }
});

<强> jsfiddle

Answer 3

如果找不到其他解决方案，可以使用mousedown事件代替click事件。

这不是最佳解决方案，因为它的行为与正常情况不同。通常，用户期望当手指从鼠标按钮释放时发生动作。不是当手指按住鼠标按钮时。

Answer 4

你可以在按钮周围添加一个div（类似于什么的边距，20px？），并且绑定了相同的js / jquery。这样，如果他们会错过点击（lol），脚本仍会触发。但是，我注意到，如果你在按下按钮的同时将鼠标从按钮上移开，按钮将不会做任何事情（不只是在你的页面上发生，即尝试使用Facebook登录按钮甚至是本网站上的按钮）

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

4 个答案: