0

下記のコードは、ボタンを押したときの矢印の色は『ライトスカイブルー』に、戻したときは『レッド』になるように設定したものですが、連打して元に戻した場合に、たまに『ライトスカイブルー』のままになっていることがあります。原因と,また解決策があれば、教えていただけませんでしょうか。

<INPUT id="Left" TYPE="button" VALUE="<" style="background-color:black; color:red;" onMouseDown="document.getElementById('Left').style.color='lightskyblue'" onMouseUp="document.getElementById('Left').style.color='red';">
2
  • 試してみましたが再現しませんでした。例えば、getElementById('Left') の 代わりにthisを使ってみたらどうでしょうか?onMouseDown="this.style.color='lightskyblue'"
    – BLUEPIXY
    Commented 2016年5月5日 1:07
  • 何か冗漫な書き方だと思っていましたが、それでいいのですね。 再現は、しますが…それと、それでも連打すると、元に戻らないことがあります。
    – user9359
    Commented 2016年5月5日 1:48

1 件の回答 1

2

onmouseupが発生する前に、カーソルがボタンから外れてしまったのでしょう。
ボタンをクリックしたままカーソルを動かし、ボタンでない領域で離すと再現しました。
これの対処として、質問者様の書き方を尊重すれば、たとえばonmouseleaveイベントでカーソルが外れてしまったときにも赤色に戻す、という動作を実装する方法があります。

<input id="Left" type="button" value="<"
    style="background-color:black; color:red;"
    onmousedown="this.style.color='lightskyblue'"
    onmouseup="this.style.color='red';"
    onmouseleave="this.style.color='red';"
    />

あるいは、cssで:active疑似セレクタを利用して以下のようにすることもできます。
個人的にはjsの必要ないこちらがベターかと思います。

#Left
{
  background-color: black;
  color: red;
}

#Left:active
{
  color: lightskyblue;
}
<input id="Left" type="button" value="<" />

また細かいことですが、htmlのタグ名および属性名は小文字にするほうがよいです。

5
  • 回答をありがとうございました。 onmouseupが発生する前に、カーソルがボタンから外れたのですね。 "onmouseleave"とは、こういったときにも活用できるイベントですね。 ":active疑似セレクタ"というものを、活用するという方法もあるのですか。 解決策は、あるものですね。助かりました。 それと、確かにhtmlのタグ名等は、大文字になっていますね。コピペを繰り返しているうちに、いつの間にか大文字に変わってしまうという現象があります。
    – user9359
    Commented 2016年5月5日 14:01
  • ちょっと1つ気付いたのですが、:active疑似セレクタを設定したボタンは、"無効"にできないのでしょうか。disabledを埋め込んでも、この効果はありません。
    – user9359
    Commented 2016年5月6日 11:43
  • うまくいきました。:disabled擬似セレクタも追加するといいようです。 お騒がせしました。
    – user9359
    Commented 2016年5月6日 12:30
  • 問題がないようであれば余計なコメントですが、要素がdisabledになるケースを考慮すれば回答にある#Left:active#Left:not(:disabled):activeと書き換えることで期待する動作が得られますね。
    – user15182
    Commented 2016年5月6日 14:04
  • そのようにも書けるのですか。こちらがコンピューターが好みそうな書き方のようですので、活用させていただきます。
    – user9359
    Commented 2016年5月7日 10:38

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。