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

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

MARKUP：

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

DEMO：http://jsfiddle.net/pn47K/6/

按钮元素事件

4 个答案: