none
プルダウンメニューとマウスホイールの関係 RRS feed

  • 質問

  • いつもお世話になっております。
    プルダウンメニューとマウスのホイールの問題で質問があります。

    再現手順は以下の通りです。

    1.プルダウンメニューA、プルダウンメニューBがあります。
    2.プルダウンメニューAをマウスの左ボタンでクリックして、アクティブにします。
    3.その後、マウスのホイールを上下すると、プルダウンメニューAの項目が変わります。
    4.プルダウンメニューAをアクティブにしたまま、マウスのカーソルとプルダウンメニューBが重なるように移動します。
    5.その後、マウスのホイールを上下すると、プルダウンメニューBの項目が変わります。

    他にも、以下の現象が発生しています。

    ・ページをマウスのホイールでスクロールしようとしたら、選択していないプルダウンメニューの項目が変わる。
    ・プルダウンメニューAを選択してマウスのホイールを上下して項目を変更しようとしたら、プルダウンメニューBの項目も、一緒に変更した。

    上記の現象はお客様の環境で再現しており、再現するブラウザとそうでないブラウザが存在しています。

    [動作環境]
    Web/APサーバー(2台のNLB構成)]
    Windows Server 2008 SP1 Standard Edition
    IIS7.0
    .NET Framework 2.0
    ASP.NET 2.0
    (全て64bit版)
    Seasar.NET

    [DBサーバー(クラスタリング構成)]
    Windows Server 2008 SP1 Enterprise Edition
    SQL Server 2008 Standard Edition
    (全て64bit版)

    [クライアント]
    Windows XP Professional SP3
    Internet Explorer 6
    (全て32bit版)
    今後は、同じHTML文をテキストエディアで作成して、問題の切り分けを行おうか考えております。


    質問1:
    過去に類似した問題にあったことはありますか?あれば、どのような問題や解決方法があれば教えてください。

    質問2:
    ASP.NET2.0、またはJavaScriptでマウスを制御できますが、上記のような動作をプルダウンやマウスのホイールで実現可能のなのでしょうか。


    以上、ご教授していただけるなら幸いです。
    2009年10月9日 9:32

回答

  • > 質問1:
    > 過去に類似した問題にあったことはありますか?あれば、どのような問題や解決方法があれば教えてください。

    プルダウンメニューとは ASP.NET の DropDownList コントロールのことだと思いますが、そのような問題は経験ありま
    せん。 

    DropDownList コントロールなら、HTML は単なる <select name=""><option value=""> になるはずで、サーバー
    側は関係なく(ASP.NET の問題ではなく)、ブラウザの問題とおもわれますが。 ブラウザは何でしょう?


    > 質問2:
    > ASP.NET2.0、またはJavaScriptでマウスを制御できますが、上記のような動作をプルダウンやマウスのホイールで
    > 実現可能のなのでしょうか。

    マウスのホイールの動きを JavaScript で検出して、プルダウンメニュー(HTML の  <select ...><option ...> ) の選
    択を変更することは可能です。

    マウスホイールの動きの検出のための JavaScript については以下のサイトが参考になると思います。

    Mouse wheel programming in JavaScript
    http://adomas.org/javascript-mouse-wheel/

    例えば、上記のページに記載されているコードの function handle を以下のよう書き換えててやれば、マウスホイールを
    操作することで DropDownList1 の選択項目が変わります。

    function handle(delta) {
        var ddl = document.getElementById("DropDownList1");
        if (delta < 0) {
            if (ddl.selectedIndex < ddl.options.length - 1) {
                ddl.selectedIndex += 1;
            }
        }
        else {
            if (ddl.selectedIndex > 0) {
                ddl.selectedIndex -= 1;
            }
        }
    }

    2009年10月10日 4:14

すべての返信

  • > 質問1:
    > 過去に類似した問題にあったことはありますか?あれば、どのような問題や解決方法があれば教えてください。

    プルダウンメニューとは ASP.NET の DropDownList コントロールのことだと思いますが、そのような問題は経験ありま
    せん。 

    DropDownList コントロールなら、HTML は単なる <select name=""><option value=""> になるはずで、サーバー
    側は関係なく(ASP.NET の問題ではなく)、ブラウザの問題とおもわれますが。 ブラウザは何でしょう?


    > 質問2:
    > ASP.NET2.0、またはJavaScriptでマウスを制御できますが、上記のような動作をプルダウンやマウスのホイールで
    > 実現可能のなのでしょうか。

    マウスのホイールの動きを JavaScript で検出して、プルダウンメニュー(HTML の  <select ...><option ...> ) の選
    択を変更することは可能です。

    マウスホイールの動きの検出のための JavaScript については以下のサイトが参考になると思います。

    Mouse wheel programming in JavaScript
    http://adomas.org/javascript-mouse-wheel/

    例えば、上記のページに記載されているコードの function handle を以下のよう書き換えててやれば、マウスホイールを
    操作することで DropDownList1 の選択項目が変わります。

    function handle(delta) {
        var ddl = document.getElementById("DropDownList1");
        if (delta < 0) {
            if (ddl.selectedIndex < ddl.options.length - 1) {
                ddl.selectedIndex += 1;
            }
        }
        else {
            if (ddl.selectedIndex > 0) {
                ddl.selectedIndex -= 1;
            }
        }
    }

    2009年10月10日 4:14
  • ご回答ありがとうごいます。

    さっそく検証してみます。

    2009年10月14日 4:24