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();
});

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

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

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;
    }
});​

小提琴 - http://jsfiddle.net/atif089/pn47K/8/

Answer 2

问题可能是因为按钮，它总是看起来像它被按下，因为鼠标按钮仍然处于保持状态，无论鼠标指针是否在按钮顶部。也许这可以通过自定义样式的按钮来完成。

JS：

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

$('#im-a-button').mouseup(function() {
   $('#pressed').hide();
   $('#relaxed').show();
});

$('#im-a-button').mouseout(function(){
   $('#pressed').hide();
   $('#relaxed').show();
});

标记：

<div id="pressed">I'm shown when button pressed</div>
<div id="relaxed">I'm shown when button relaxed</div>
<p id="im-a-button">Press Me</p>

CSS：

#pressed {
 display: none;   
}

#im-a-button {
  color: blue;    
  cursor: pointer;   
}

#im-a-button:hover {
  color: red;       
}

Answer 3

用这个 JS 试试这个：

var delm = document.documentElement ? document.documentElement : document.body;

jsFiddle

Answer 4

添加mouseleave

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

演示：http: //jsfiddle.net/pn47K/6/