0

イメージタグをラップし、onmouseupハンドラーonmousedownが定義されている HTML ボタンがあります。ボタンが下にあるときは押された画像に、上にあるときは上にある画像に変わります。問題は、ユーザーがボタンを押したままマウスをボタンからドラッグすると、onmouseupイベントが呼び出されないため、画像が押された状態のままになることです。何が起こっているかの例を次に示します。ボタンをクリックしてドラッグしてみてください: http://jsfiddle.net/gsingh93/ubyV8/5/

どうすればこれを修正できますか?

4

3 に答える 3

0

windowターゲットとして使用する必要があります：

document.getElementsByTagName("button")[0].addEventListener("mousedown", function(){
    document.getElementById("image").src = "http://www.clogsmusic.com/padma/redCircle50x50.gif";
    window.onmouseup = function(){
        document.getElementById("image").src = "http://creativeenergyblog.files.wordpress.com/2008/05/blue-circle.jpg?w=50&h=50";
    }
});

動作デモ: http://jsfiddle.net/DerekL/XTLJ6/

于 2012-06-10T22:00:05.013 に答える
0

マウスがボタンから離れたら、mouseUp() を呼び出します。

onmouseout="mouseUp();"
于 2012-06-10T22:00:43.580 に答える
0

はい、分かりました！画像を取り除き、代わりに画像をボタンの背景にしました。また、問題を処理するために onmouseout() 呼び出しの条件を実装しました。見てください。よろしければ投票してください！

http://jsfiddle.net/ubyV8/19/

于 2012-06-10T22:08:06.120 に答える