当 mousedown 和 mouseup 事件不等于单击时答案

【问题标题】：When a mousedown and mouseup event don't equal a click当 mousedown 和 mouseup 事件不等于单击时
【发布时间】：2011-01-07 20:26:22
【问题描述】：

一段时间以来，我一直在使用一些按钮，这些按钮在使用相对位置和 :active 伪类中的 top: 1px 被点击时会产生压抑的效果。

我遇到了点击事件没有触发的问题，结果证明是由于 mousedown 和 mouseup 事件没有在同一个元素上触发。我做了一些摆弄以确保最里面的元素覆盖整个按钮并发现问题仍然存在。

如果我单击文本顶部的右侧，则链接会向下跳（触发 mousedown 事件）然后返回（触发 mouseup 事件），但不会发生单击。如果我在文本中间很好地单击或远离文本，一切都很好。

我在这里唯一能想到的是 mousedown 事件在 textNode 上触发，而 mouseup 在锚元素上触发，因为 textNode 不再位于光标下。捕捉事件对象并使用萤火虫查看目标表明情况并非如此，但我真的想不出另一种解释。阅读了一下，我可以找到一些提到在 Safari 中的 textNodes 上触发的事件，但没有关于这种不匹配的内容。

以下 sn-p 应该允许您复制问题。请记住，您必须单击文本顶部的右侧，或上方一两个像素，并且此问题仅发生在一行像素中：

<style>
a.button-test {
 display: inline-block;
 padding: 20px;
 background: red;
}
.button-test:active {
 position: relative;
 top: 1px;
}
</style>
<a class="button-test" href="#">Clickedy click</a>

搞乱CSS，不使用内联块，增加行高而不是填充等似乎在这里没有效果。我尝试了很多组合。我的大部分测试都是在 Firefox 中完成的，以允许我绑定到事件并通过 firebug 记录正在发生的事情，但我在其他浏览器中也遇到了这个问题。

除了失去主动跳跃之外，有没有人可以在这方面提供任何灵感？如果可以的话，我真的很想保持这种效果。

非常感谢，

Dom（没有双关语）

【问题讨论】：

标签： events mouse click textnode

【解决方案1】：

这是我在 jQuery 中使用自定义事件的解决方法

var buttonPressed;
// Track buttonPressed only on button mousedown
$(document).on('mousedown', 'button', function (e) {
    // Make sure we store the actual button, not any contained
    // element we might have clicked instead
    buttonPressed = $(e.target).closest('button');
});
// Clear buttonPressed on every mouseup
$(document).on('mouseup', function (e) {
    if (buttonPressed) {
        // Verify it's the same target button
        var target = $(e.target).closest('button');
        if (target.is(buttonPressed)) {
            buttonPressed.trigger('buttonClick');
        }
        buttonPressed = null;
    }
});

$('button').on('buttonClick', function (e) {
    // Do your thing
});

只要确保您不同时处理原生 click 和 buttonClick 事件即可。

【讨论】：

【解决方案2】：

如果将样式更改为 top: 10px

，则更容易重现此问题

【讨论】：