Chrome与FF按钮单击行为

Question

我在我的按钮上使用：active pseudoclass来点击时更改填充和边框颜色。这在视觉上模仿按钮按下。 See an example.

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

我已经阅读了关于FF与Chrome的按钮和填充的奇怪内容，但我无法弄清楚如何解决这个问题。

Answer 1

解决方案：点击一下

将position: relative添加到button，然后将其覆盖为:before伪元素，如下所示：

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

似乎为我解决了这个问题。见this fiddle。我想它通过在点击它时给一个“元素”集中注意力来解决这个bug（我认为这是一个bug）。

Answer 2

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

不要检查同一元素上的mousedown和mouseup，而只检查按钮上的mousedown，然后检查任何其他元素上的mouseup。< / p>

Answer 3

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

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

Answer 4

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

这是它的工作原理：

1. 将'down'初始化为false
2. 按钮上的mousedown导致'down'为真
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;
});

Answer 5

在玩完你的例子之后，我想我得到了幕后发生的事情。默认情况下，click事件将在触发回调之前检查要触发的mousedown和mouseup事件。问题是你单击文本，你的当前目标是文本现在（这意味着mousedown事件已经在文本区域内被触发，并且它正在等待mouseup事件被触发以完成点击事件）。但是，您将光标拖出文本并在文本区域外释放鼠标，现在您的当前目标是Button，而不是文本（鼠标事件不会在文本区域内，但在按钮区域内），因此单击事件不会发生。但是，如果您单击文本并拖动，并在文本区域内释放鼠标，它将正常工作。这是事件冒泡或捕获的问题。在jQuery中我们有event.stopPropagation（）或event.stopImmediatePropagation，但它只适用于FF，而不适用于Chrome。

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

Answer 6

使用“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;

    });