C# と VB.NET の質問掲示板

■No81362 (miito さん) に返信

ブラウザは何ですか？ JavaScript はブラウザ依存なので、ブラウザの情報は重要なのですが。

> ボタン(btnTest)をクリックしたら
> ラベル(lblTest)の表示状態を切り替え、
> ラベル以外の領域をクリックしたら非表示にする

サーバー側で起こっていることと、クライアント側で起こっていることの区別はついているで
しょうか？　btnTest をクリックしたときの制御をポストバックしてサーバー側で、ラベル以
外の領域をクリックしたときの制御を JavaScript でクライアント側で行いたいように見えま
すがそれにどういう意味があるのか教えていただけませんか？

・・・ということを事前に聞いてから回答したいのですが（意味のないことを回答することに
なるかもしれないので）とりあえずのレスを書いておきます。

まず、今のコードでは btnTest をクリックしてもラベルの表示・非表示は切り替わらないの
では？

ラベルに初期値として以下のように style="display:block;" を設定しておいて、

<asp:Label ID="lblTest" runat="server" Text="Label" style="display:block;"/>

ボタンのハンドラで以下のようにしないとダメかと思いますが。（コードは C# ですが、読め
ますよね？）

protected void btnTest_Click(object sender, EventArgs e)
{
    if (lblTest.Style["display"] == "block")
    {
        lblTest.Style["display"] = "none";
    }
    else
    {
        lblTest.Style["display"] = "block";
    }
}

ラベル以外の領域をクリックしたときの制御を JavaScript で行うのは、バブリングを利用し
て、イベントリスナに渡される event オブジェクトから target プロパティでイベントを発
生させたオブジェクトを取得できるので、それがラベルか否かを判断して制御してはいかがで
すか？　そのあたりは以下の記事が参考になりませんか？

キャプチャリングとバブリング
http://surferonwww.info/BlogEngine/post/2012/12/01/capturing-target-and-bubbling-phases.aspx