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

マウスボタンを押したままボタン要素の外にマウスを移動すると、リラックスボタンの 2 番目のハンドラーが起動しないため、#presseddiv はまだアクティブで#relaxedありません。イベントを設定できますmouseoutが、その場合、ボタン要素は押されたように見えます。しかし、リラックスのためのイベントはすでに発生しています。

期待される動作を実現するには、どのイベントハンドラーを設定すればよいですか? フィドル

score 1 · Accepted Answer

私の最善の策は、グローバル変数またはその 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/

score 0 · Accepted Answer

このJSでこれを試してください：

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

jsフィドル

score 0 · Accepted Answer

問題はボタンが原因である可能性があります。マウスポインターがボタンの上にあるかどうかに関係なく、マウスボタンがまだ保持されているため、常に押されたように見えます。おそらく、これはカスタムスタイルのボタンで実現できます。

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

score -1 · Accepted Answer

追加mouseleave

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

デモ：http：//jsfiddle.net/pn47K/6/

javascript - ボタン要素イベント

4 に答える 4

Related

Reference