Events 当mousedown和mouseup事件不';我一点也不高兴

Events 当mousedown和mouseup事件不';我一点也不高兴,events,mouse,click,textnode,Events,Mouse,Click,Textnode,我已经使用一些按钮有一段时间了,当使用position-relative和:active伪类中的top:1px单击这些按钮时,它们会产生抑制效果 我遇到了click事件没有触发的问题,这是由于mousedown和mouseup事件没有在同一个元素上触发。我做了一些修改,以确保最内部的元素覆盖了整个按钮,并发现问题仍然存在 如果在文本顶部单击鼠标右键,则链接会向下跳转(触发mousedown事件),然后返回(触发mouseup事件),但不会发生单击。如果我在文本中间很好地点击,或者很好地远离文本,

我已经使用一些按钮有一段时间了,当使用position-relative和:active伪类中的top:1px单击这些按钮时,它们会产生抑制效果

我遇到了click事件没有触发的问题,这是由于mousedown和mouseup事件没有在同一个元素上触发。我做了一些修改,以确保最内部的元素覆盖了整个按钮,并发现问题仍然存在

如果在文本顶部单击鼠标右键,则链接会向下跳转(触发mousedown事件),然后返回(触发mouseup事件),但不会发生单击。如果我在文本中间很好地点击,或者很好地远离文本,一切都很好。

这里我唯一能想到的是,mousedown事件在textNode上触发,mouseup在锚元素上触发,因为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>

a、 按钮测试{
显示:内联块;
填充:20px;
背景:红色;
}
.按钮测试:激活{
位置:相对位置;
顶部:1px;
}
乱搞CSS,不使用内联块,增加行高而不是填充等等,在这里似乎并没有效果。我试过很多组合。我的大部分测试都是在Firefox中完成的,这样我就可以绑定到事件并记录firebug中发生的事情,但我在其他浏览器中也遇到了这个问题

除了失去主动跳跃之外,还有人能在这方面提供什么灵感吗?如果可以的话,我真的很想保持这种效果

非常感谢


Dom(没有双关语)

如果您将样式更改为top:10px,则重现此问题会容易得多

var按钮按下;
//轨迹按钮仅在按钮鼠标向下时按下
$(文档).on('mousedown','button',函数(e){
//确保我们存储的是实际的按钮,而不是包含的任何按钮
//元素,我们可能已经点击了
buttonPressed=$(e.target).最近('button');
});
//每个鼠标上都有清晰的按钮
$(文档).on('mouseup',函数(e){
如果(按下按钮){
//确认它是同一个目标按钮
var target=$(e.target).closest('button');
如果(目标为(按下按钮)){
按钮按下。触发器('buttonClick');
}
按钮按下=空;
}
});
$('button')。在('buttonClick',函数(e)上{
//做你的事
});
只需确保您不会同时处理本机单击和按钮单击事件