javascript - 按钮元素事件

Question

我有以下代码:

HTML

<div id="pressed">I'm shown when button pressed</div>
<div id="relaxed">I'm shown when button relaxed</div>
<button>press_me</button>

CSS

#pressed {
 display: none;   
}​

JS

$('button').mousedown(function() {
    $('#pressed').show();
    $('#relaxed').hide();
});

$('button').bind('mouseup ',function() {
    $('#pressed').hide();
    $('#relaxed').show();
});

​当我按住鼠标按钮并将鼠标移出按钮元素而不是放松按钮时第二个处理程序不会触发，因此 #pressed div 仍然处于事件状态，而 #relaxed 则不是，我可以设置 mouseout 事件，但在这种情况下按钮元素看起来就像被推了一样。但放松事件已经启动。

我应该设置哪个事件处理程序来实现预期的行为？ fiddle

Answer 1

我最好的选择是使用全局变量或附加到该 dom 的变量，并将 mousedown 事件附加到文档而不是按钮上。

var btn_mousedown = false;
$('button').mousedown(function() {
    $('#pressed').show();
    $('#relaxed').hide();
    btn_mousedown = true;
});

/* When I push mouse down and move out of button, than relax button
I do not get that event triggered, how to fix ? 
*/
$(document).bind('mouseup ', function() {
    if (btn_mousedown == true) {
        $('#pressed').hide();
        $('#relaxed').show();
        btn_mousedown = false;
    }
});​

fiddle - http://jsfiddle.net/atif089/pn47K/8/