Question

我正在开发一款目前正在iphone上测试的phonegap应用。我想做的很简单。我想按一个按钮，只按下我按下的按钮。我想阻止用户同时按下多个按钮。要根据苹果指南执行此操作，您应该在按下目标按钮时禁用所有其他按钮。对我来说问题是，如果你最终在完全相同的时间内按下两个按钮，那么按下两个按钮。据我所知，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>

Answer 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”，应该有插件来解决这个问题，但最简单的方法就是触摸事件或鼠标点击事件。

看到人们如何在您自己的应用中管理这些问题的其他示例仍然很高兴？

phonegap单按钮按正确方式，无多点触控干扰

1 个答案: