Javascript “制作按钮”；“释放”；在mouseleave或mouseup上

我有一个用HTML标签创建的简单按钮，它可以直观地按下并在单击时将用户发送到某个页面。我可以让它正常点击时工作，但我希望在用户取消点击鼠标或将鼠标移离按钮时按钮“释放”（返回到原始状态）。我已经看过了其他的建议，但是还没有找到一个我想要的方法。下面是我当前使用的代码（我知道在当前的JQuery代码中，当用户离开时，“mouseup”函数不会启动；我只是没有找到合适的替代品，所以我恢复到最初的工作状态）。我愿意使用JQuery以外的东西；一开始这似乎是最好的

HTML:

JQuery：

$(document).ready(function() {
    $('.letter_buttons').mousedown(function() {
        $(this).css('box-shadow', '0px 0px 0px #888');
        $(this).animate({left: '+=1px'}, 0);
        $(this).animate({top: '+=1px'}, 0);
    });
    $('.letter_buttons').mouseup(function() {
        $(this).css('box-shadow', '2px 2px 2px #888');
        $(this).animate({left: '-=1px'}, 0);
        $(this).animate({top: '-=1px'}, 0);
    });
});

---

我看不出有任何理由为此使用javascript。这一切都可以通过一些CSS规则来完成。（）

HTML:

---

似乎您正在使用CSS3，因为您正在应用长方体阴影

出于这个原因，我将不再使用jQuery制作动画，而是使用CSS3。这样更容易维护

$('.letter_buttons').mousedown(function() {
    $(this).addClass('active');
}).mouseup(function() {
    $(this).removeClass('active');
});

CSS-将其添加到.letter_按钮类中

div.letter_buttons {
    /* CSS3 transitions */

    -webkit-transition: all 0.3s ease-out; 
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out; 
    transition: all 0.3s ease-out;
}

添加以下内容：

div.letter_buttons.active {
    left: 1px;
    top: 1px;
    box-shadow: 0px 0px 0px #888;
}

---

我以前从来没有听说过“取消点击”：）为什么要使用javascript，而不是仅仅使用：active伪类，这是专门为这个目的设计的？好主意。这并不能解决用户在“mouseup”操作之前将鼠标移出的问题，但它确实使JQuery更干净。当我将按钮从更改为时，我需要再次单击按钮，使其复位（您的JSFIDLE似乎也这样做）。有没有一种方法可以让它在你松开鼠标按钮（你可能会称之为取消点击）后立即重置？这很奇怪。这对我来说绝对不行（也不应该）。我可以在

内按下鼠标按钮，向外移动并释放它，

将恢复正常。

.letter_buttons {
    display: inline-block;
    height: 30px;
    width: 140px;
    background-color: #b2b2b2;
    border: 3px solid #2D2D2D;
    color: #2D2D2D;
    box-shadow: 2px 2px 2px #888;
    position: relative;
    left: 0;
    top: 0;
}

.letter_buttons:active {
    box-shadow: 0 0 0 #888;
    left: 1px;
    top: 1px;
    transition: all 0.2s;
}

$('.letter_buttons').mousedown(function() {
    $(this).addClass('active');
}).mouseup(function() {
    $(this).removeClass('active');
});

div.letter_buttons {
    /* CSS3 transitions */

    -webkit-transition: all 0.3s ease-out; 
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out; 
    transition: all 0.3s ease-out;
}

div.letter_buttons.active {
    left: 1px;
    top: 1px;
    box-shadow: 0px 0px 0px #888;
}