13

我在按钮上使用 :active 伪类来更改单击时的填充和边框颜色。这在视觉上模仿了按钮按下。看一个例子。

在FF工作。但是，在 Chrome 中，点击并不总是注册。具体来说，如果您单击并按住按钮内的文本，然后拖出文本（但仍在按钮内），则不会触发单击。如果您单击填充，然后拖动到文本中，也是如此。

我读过关于 FF 与 Chrome 中的按钮和填充的奇怪内容，但我不知道如何解决这个问题。

4

6 回答 6

14

解决方案：给它一个单一的点击

添加 a position: relative，button然后用:before伪元素覆盖它，如下所示：

button:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

似乎为我解决了这个错误。看到这个小提琴。我想它通过在单击时提供一个“元素”来关注它来解决错误（我确实认为这是一个错误）。

于 2012-05-30T00:19:17.463 回答
4

试试这个：http: //jsfiddle.net/uPZuJ/9/

不要同时检查mousedown同mouseup一个元素，而是只检查mousedown你的按钮，然后检查mouseup任何其他元素。

于 2012-05-28T19:21:00.920 回答
1

您的按钮在 Chrome 中效果很好。我已经通过几行 CSS 和 IE 的属性修复了“单击并按住按钮内的文本”的问题。 http://jsfiddle.net/uPZuJ/2/

编辑：这是我修复的错误的屏幕截图：

在此处输入图像描述

于 2012-05-15T21:52:01.227 回答
1

试试这个：http://jsfiddle.net/uPZuJ/22/ http://jsfiddle.net/uPZuJ/25/

这是它的工作原理：

  1. 将“向下”初始化为假
  2. 按钮上的 mousedown 导致“向下”为真
  3. 在 mouseup/click 时，如果 'down' 为 true，则附加文本 'click' 并将 'down' 设置为 false

点击触发点击。

将文本拖动到填充中会触发单击。

将填充拖动到文本中会触发单击。

从内部拖动到外部不会触发单击。

从外向内拖动不会触发点击。

这是代码：

var down=false;
$("button").mousedown(function() {
    down=true;
});
$("button").mouseup(function() {
    if(down) {
        $("#clicks").append("<div>click</div>");
    }
    down=false;
});
$("button").click(function() {
    if(down) {
        $("#clicks").append("<div>click</div>");
    }
    down=false;
});
于 2012-05-29T22:08:31.710 回答
0

在玩弄了你的例子之后，我想我明白了幕后发生的事情。默认情况下，click 事件会在触发回调之前检查 mousedown 和 mouseup 事件是否被触发。问题是您单击文本，您当前的目标现在是文本（这意味着 mousedown 事件已经在文本区域内触发，并且它正在等待触发 mouseup 事件以完成单击事件）。但是，您将光标拖出文本并在文本区域外释放鼠标，您当前的目标现在是按钮，而不是文本了（鼠标事件不会在文本区域内触发，而是在按钮区域内触发），所以单击事件不会发生。但是，如果您单击文本并拖动，然后在文本区域内释放鼠标，它会正常工作。这就是事件冒泡或捕获的问题。

我建议使用 mousedown 和 mouseup 事件而不是 click 事件。

于 2012-05-29T09:44:47.227 回答
0

使用“mouseup”而不是“click”，它应该在 ie、chrome 和 ff 中工作。

 var elementName = "";

    $("button").mouseup(function() {

        if (elementName != "" && elementName == "BUTTON") {


            $("#clicks").append("<span>click</span><br/>");
            elementName = "";
        }

    });


    $("button").mousedown(function() {

        elementName = $(this).get(0).tagName;

    });
于 2012-05-29T10:00:33.363 回答