8

在 WebKit 浏览器上（我在 Mac 上的 Chrome 和 Safari 上测试过），按钮元素的行为很奇怪：

Wen 在这个小提琴http://jsfiddle.net/5ReUn/3/中你执行以下操作：

  1. 在光标位于 HTML 按钮文本上时按鼠标左键
  2. 将光标（按下时）移动到没有文本的按钮区域
  3. 释放鼠标按钮

那么按钮元素上的点击事件就不会被触发！

HTML 非常简单：

<button id="button">Click</button>

CSS 一点也不复杂：

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

用于点击捕获的 JS：

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

我网站的许多访问者抱怨按钮不可点击。他们没有意识到点击时正在移动光标。

有没有人找到解决方法？

4

4 回答 4

13

原来是WebKit 中的一个错误。

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

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

示例 CSS：

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

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

于 2013-03-29T06:40:51.930 回答
1

在这里，您尝试拖动而不是单击它。因此，您可能想尝试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

于 2013-03-28T10:59:41.423 回答
1

如果您没有找到其他解决方案，您可以使用mousedown事件而不是click事件。

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

于 2013-03-28T11:00:13.920 回答
0

您可以在按钮周围添加一个 div（例如，20px 的边距？），并绑定相同的 js/jquery。这样，如果他们会missclick(lol)，脚本仍然会触发。但是，我注意到，如果您在按下按钮时将鼠标拖离按钮，则该按钮将不会执行任何操作（不仅仅发生在您的页面上，即尝试使用 Facebook 登录按钮甚至本网站上的按钮） .

于 2013-03-28T10:53:13.357 回答