24580


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

[code]

    <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';">
    
[/code]


CC BY-SA 3.0
2016-05-05T00:50:52.577
24576
2016-05-05T07:36:14.250
9359
question
javascript
"onmouseup"の不具合の原因


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

[code]

    <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';"
        />
[/code]

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

[code]

    #Left
    {
      background-color: black;
      color: red;
    }
    
    #Left:active
    {
      color: lightskyblue;
    }
[/code]

[code]

    <input id="Left" type="button" value="<" />
[/code]

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


CC BY-SA 3.0
2016-05-05T07:36:14.250
24580
2016-05-05T07:36:14.250
24576
answer