当mousedown和mouseup事件不等于点击时 [英] When a mousedown and mouseup event don't equal a click
问题描述
我使用了一些按钮一段时间现在有一个郁depressed的效果，因为他们使用位置相对和顶部：1px在活动伪类中点击。
我有点击事件不触发的问题，这是由于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-testhref =＃> Clickedy点击< / a>
使用CSS乱码，不使用inline-block，增加行高而不是填充等。在这里似乎没有影响。我试过很多组合。我的大多数测试已经在Firefox中完成，允许我绑定到事件，并记录通过firebug发生了什么，但我也遇到这个问题在其他浏览器。
任何人都有任何灵感，他们可以提供这个其他失去主动跳跃？
非常感谢，
）如果将样式更改为 top：10px ，则更容易重现此问题。
I've been using some buttons for a while now that have a depressed effect as they are clicked using position relative and a top: 1px in the :active pseudo-class.
I had problems with click events not firing and it turned out to be due to the mousedown and mouseup events not firing on the same element. I did a bit of fiddling to make sure the inner-most element covered the whole button and discovered that the issue remained.
If I click right at the top of the text then the link jumps down (firing the mousedown event) and then back up (firing the mouseup event) but the click does not occur. If I click nicely in the middle of the text or nicely away from the text all is fine.
The only thing I can think of here is that the mousedown event is firing on the textNode and the mouseup is firing on the anchor element as as the textNode is no longer under the cursor. Catching the event objects and looking at the targets using firebug indicates this is not the case but I really can't think of another explanation. Reading around a bit I can find some mention of events firing on textNodes in Safari but nothing about this mismatch.
The following snippet should allow you to replicate the problem. Remember, you must click right at the top of the text, or a pixel or two above, and this issue only occurs with one row of pixels:
<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>
Messing around with the CSS, not using inline-block, increasing line-height instead of padding etc. doesn't seem to have an effect here. I've tried many combinations. Most of my testing has been done in Firefox to allow me to bind to the events and record what's going on through firebug but I also encounter this problem in other browsers.
Does anyone have any inspiration they can offer on this other than lose the active jump? I'd really like to keep this effect if I can.
Big thanks,
Dom (no pun intended)
It's much easier to reproduce this problem if you change the style to top: 10px
这篇关于当mousedown和mouseup事件不等于点击时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
