2

現在iphoneでテストしているphonegapアプリを開発しています。やりたいことはシンプル。ボタンを押したいのですが、押しているボタンだけを押す必要があります。ユーザーが同時に複数のボタンを押さないようにしたい。リンゴのガイドラインに従ってこれを行うには、ターゲット ボタンが押されたときに他のすべてのボタンを無効にする必要があります。私にとっての問題は、最終的に2つのボタンをまったく同時にタブで押し続けると、両方のボタンが押されることです。私の知る限り、JavaScriptにはロックがありません。また、変数をロックとして使用しようとしましたが、それでも機能しません。問題を再現するためにiPhoneでテストできるこのコードがあります。私の質問は、ボタンを押すことを正しい方法でどのようにプログラムするのですか?

     <script type="text/javascript" src="plugins/jquery.js"></script>

      <script>

       $(document).ready(function(){

               CreateEvents();
           }); //end ready function

           function CreateEvents()
           {

                 $('.divs').on('touchstart', function(){

               $('.divs').not(this).off();
                  $(this).css('background-color','red');

               });



               $('.divs').on('touchend', function(){

                  $(this).css('background-color','green');
                  setTimeout(function(){
                        CreateEvents();

                        }, 300);

               });


               }
      </script>
<style>
 .divs{
width:200px;
height:200px;
background-color:green;

}
 </style>

</head>
<body>


<div class="divs">
div1
</div>

<div class="divs">
div2
    </div>

</body>
</html>
4

1 に答える 1

0

これは、ボタンを一度に 1 つだけ押すようにする正しい方法だと思います。

   $(".divs").on('touchstart', function(event){
                        event.stopPropagation();
                        event.preventDefault();

                        if(event.handled !== true) {

                                    $('.divs').not(this).off();
                                      $(this).css('background-color','red');

                            event.handled = true;
                        } else {
                            return false;
                        }
                });
            $(".divs").on('touchend', function(event){
                        event.stopPropagation();
                        event.preventDefault();

                        if(event.handled !== true) {

                                     $(this).css('background-color','green');
                                     CreateEvents();

                            event.handled = true;
                        } else {
                            return false;
                        }
                });

ただし、タッチ イベントとマウス クリック イベントの両方を使用する場合、一部のデバイスではタッチがクリック イベントとタッチ イベントの両方として登録されるため、ダブルクリックが行われることに注意してください。この方法は明らかにそれも防ぐはずですが、実際にはそうではありません。これは「ghostclick」と呼ばれ、これを修正するプラグインがあるはずですが、タッチ イベントまたはマウス クリック イベントのいずれかを使用するのが最も簡単な方法です。

人々が自分のアプリでこれらの問題をどのように管理しているかの他の例を見るのはまだいいでしょうか??

于 2013-03-31T15:01:39.047 に答える