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

时间:2010-01-21 17:20:25

标签: events mouse click textnode

我一直在使用一些按钮,因为它们使用位置相对和顶部:1px在:active伪类中单击而具有抑制效果。

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

如果我单击文本顶部的右侧,则链接跳转(触发mousedown事件)然后备份(触发mouseup事件),但不会发生单击。如果我在文本中间很好地点击或者很好地远离文本,那么一切都很好。

我唯一能想到的是mousedown事件在textNode上触发,mouseup在anchor元素上触发,就像textNode不再在光标下一样。捕获事件对象并使用firebug查看目标表明情况并非如此,但我真的想不出另一种解释。稍微阅读一下,我可以找到一些关于在Safari中的textNodes上触发的事件的提及,但没有关于这种不匹配。

以下代码段应该允许您复制问题。请记住,您必须单击文本顶部的右侧,或上面的一个或两个像素,此问题仅出现在一行像素中:

<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(没有双关语意)

2 个答案:

答案 0 :(得分:1)

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

,则更容易重现此问题

答案 1 :(得分: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
});

请确保您不会同时处理本机点击和按钮点击事件。