jQueryでimageボタンのイベントを処理する (enabled/disabled関連)

まだ確認中だが、画像を利用したボタンをdisabled(＝使えない)にしようとしてうまくいかなかったので、回避策について。

次のようなimageボタンを作成し、イベントハンドラを用意した。

<button type="button" id="btnConsoleGoFirst"><img src="b_first.png"/></button>

$('#btnConsoleGoFirst').live('click', function(){
    console.log('button clicked.');
    hoge(); // クリック時に行いたい処理
});

このボタンをchromeでクリックすると、ボタン・画像の両方でクリックイベントが発生する(イベントが伝播したというのが正確かもしれない)ように見える。ちなみにfirefoxではボタンのみでイベントが発生しているように見える。

ここで、buttonのdisabled属性をtrueにセットして、｢ボタン｣をクリックできないようにする。

$('#btnConsoleGoFirst').prop('disabled',true);

ところが、chromeでは画像がクリックされたという扱いになり、結果として親要素であるボタンのハンドラが実行されてしまう。(hoge()が実行される。仕様上、img要素は disabled にできない。)
firefoxでは期待どおりクリックできない状態になった。また、当然だが、画像を使わない普通のボタンであればchrome/firefoxともクリックできなくなる。

ということで、少し変だが次のようにして対応する。

$('#btnConsoleGoFirst').live('click', function(){
    console.log('button clicked.');
    if ($('#btnConsoleGoFirst').prop('disabled') == true){
        console.log('button clicked.but disabled');
        return; // 何もせずに戻る
    }
    hoge(); // クリック時に行いたい処理
});

ちなみに、disabledにしたボタンをenabledに戻す方法は以下のとおり。

$('#btnConsoleGoFirst').prop('disabled',false);

chrome version: 24.0.1312.57 m