つきすけ の コーディング記

細かいところで嫌にならないように、小さいことでも解説していくブログ。たまに関係ないことも書く。

jQueryでイベントを条件で分岐させる

上手いタイトルが思いつかない。僕がやりたいのはこういうこと、

「ある場所をマウスオーバーした時色を変える、マウスアウトをしたら色を戻す。ただしクリックしてあった場合、マウスアウトは無効とし、クリック後の色を残す」

もっとも簡単な解決法は、
CSSで:hoverすれば良いじゃん」
なのだけれど、まあ上記に関わらず使いたい時があるかもしれないので、これを機に考えていく。

※※追記※※
難しく考えるものでもなかった

jQueryを使う

むしろ他に何を使う

マウスオーバー or アウトをしたときの動き

※元のフォントカラーを黒とする

$(function(){
    $('h1').hover(function(){
        $('h1').css('color','red');
    },
    function(){
        $('h1').css('color','black');
    });
});

クリックした時の動き

$(function(){
    $('h1').click(function(){
        $('h1').css('color','blue');
    });
});

条件分岐

どうやって分岐しようか?

クリック後の色が他の色と異なる場合

これは簡単。
例えばクリック後にいろが青くなったとして、その青色はクリック時にしか現れないならば、現在の文字が青色か否かを判定すればよい。青色じゃない場合はホバーイベントを発生させる。

if($('h1').css('color') != 'blue'){
    ホバーイベントを発生させる
});

クリック時の色とその他の色が重なっている場合

もし、クリックもホバーもしていない状態が同じ青色だったとき(デフォルトのカラーがそもそも青色だったとき)、色でクリックしたかどうかを判断することはできない。
なので、普通に変数を用意する。

var flag = false;
$(function(){
        クリックイベントを発生させた時、flag = true とする。
    });
    if(!flag){
        trueじゃなければ、クリックしてなければ
        ホバーイベントを発生させる
    });
});


実行未確認の部分があるので、ご容赦ください。