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

我一直在使用一些按钮，现在有一些按钮效果不佳，因为它们是使用相对位置和顶部的单击：1px在：active伪类。当mousedown和mouseup事件不等于点击时

我点击事件没有触发问题，结果是由于mousedown和mouseup事件没有触发相同的元素。我做了一些小小的调整，以确保最内部的元素覆盖整个按钮，并发现问题依然存在。

如果我在文本的顶部点击右键，然后链接跳下（触发mousedown事件），然后备份（触发mouseup事件），但不会发生点击。如果我在文字中间点击很好，或者很好地离开文字，一切都很好。

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

以下片段应该允许您复制问题。记住，你必须点击右键，在文本，或者像素或两个以上的顶部，这个问题只有一行像素的发生：

<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中完成的，以允许我绑定事件并通过萤火虫记录发生了什么，但我也在其他浏览器中遇到过这个问题。

有没有人有任何灵感，他们可以提供其他比失去积极跳跃？如果可以的话，我真的很想保持这种效果。

非常感谢，

大教堂（没有双关语意）

来源

2010-01-21 dmnc

这是容易得多，如果你改变了风格顶部重现此问题：10px的

来源

2010-01-21 17:55:10 goat

下面是一个使用我的解决办法自定义事件与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 
});

只要确保您不处理本机点击和buttonClick事件。

来源

2012-05-31 12:31:28

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

回答

相关问题