Jquery 单击事件不触发，因为；按下按钮"；效果：活动伪类

我试图在单击div时使用css“：active”伪类为其设置动画。div向右移动10个像素，向下移动10个像素：

#myButton:active {
    margin:10px 0 0 10px;
}

请参见此处的完整示例：

问题是，如果单击div的上边框或左边框（在jsFiddle示例中为红色），松开按钮时，鼠标指针不再位于div上方。因此，鼠标和点击都不会被触发

从技术上讲，这种行为非常合理。然而，这并不是最终用户所期望的，我不知道如何以干净、简单的方式修复它。我试图在移动的div周围放置一个父容器，并从中捕获click事件，但它似乎只会使事情变得更复杂，而且也不能很好地工作

谢谢你的阅读

纯CSS：使用Psuedo元素 这适用于IE8+、Firefox和Chrome（所有这些都经过测试）。看

您的

#myButton

需要

位置：相对的
或
绝对的
，以便
：before
元素正确定位自身

纯CSS：使用边框本身进行移位（CSS3）
如果按钮上没有边框，则使用
边框
属性本身（使用透明颜色）和
背景剪辑
（使按钮颜色不与边框重叠），可以获得相同的功能。看

因此，我的想法是在触发
mousedown
事件处理程序时，将
mouseup
事件处理程序绑定到文档。然后，您可以运行要为
mouseup
运行的代码，然后单击
。这是一个演示

$(document).ready(function() {
    $('#myButton').mousedown(function() { 
        debug('button down'); 
        $(document).on('mouseup', function(){
            $(document).off('mouseup');
            debug('button up');
            debug('click'); 
        });
    });
});

function debug(msg) {
    $('#debug').append('[' + msg + ']');
}

谢谢我想我会继续你的第一个解决方案。我可以确认它也适用于最新版本的Opera和Safari。不幸的是，它不适用于按钮：（@JordanRieger:当然不适用。@JordanRieger:如果可能的话，使用边框技巧的第二个解决方案是在Firefox中的
输入上对我有效（这就是我测试的全部内容）在。@ScottS是的，边框技巧的问题是它弄乱了圆角样式——这是我们使用样式化按钮而不是本机按钮的主要原因。请看。谢谢。我想我更喜欢使用100%CSS解决方案，但这也是一个不错的解决方案。
#myButton:active {
    border-top:10px transparent solid;
    border-left:10px transparent solid;
    background-clip: padding-box;
}

$(document).ready(function() {
    $('#myButton').mousedown(function() { 
        debug('button down'); 
        $(document).on('mouseup', function(){
            $(document).off('mouseup');
            debug('button up');
            debug('click'); 
        });
    });
});

function debug(msg) {
    $('#debug').append('[' + msg + ']');
}