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

Question

我已经使用了一些按钮了一段时间,因为它们使用位置相对和顶部:1px在:active伪类中点击它们具有抑郁效果.

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

如果我在文本上点击右键,然后链接跳下(射击鼠标按下事件),然后备份(触发MouseUp事件),但是点击并不会发生.如果我在文本中间很好地点击或者很好地远离文本,那么一切都很好.

我能想到的这里唯一的一点是,mousedown事件射击的textNode和鼠标松开被锚元素作为射击的textNode光标下不再.捕获事件对象和使用萤火虫在目标看结果表明是不是这样的,但我实在想不出另一种解释.阅读一下我可以找到一些关于在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做是为了让我绑定到事件并记录发生了什么事情通过萤火,但我在其他浏览器中也遇到了这个问题.

除了失去积极的跳跃之外,有没有人可以提供任何灵感？如果可以的话,我真的想保持这种效果.

十分感谢,

Dom(没有双关语)

Answer 1

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