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

Posted

技术标签:

【中文标题】phonegap 单键按正确方式无多点触控干扰【英文标题】:phonegap single button press the correct way without multitouch interfering 【发布时间】:2013-03-31 13:32:26 【问题描述】:

我正在开发一个 phonegap 应用程序,目前正在 iphone 上进行测试。我想做的很简单。我想按下一个按钮,并且只有我正在按下的那个按钮必须被按下。我想防止用户同时按下一个以上的按钮。要根据苹果指南执行此操作,您应该在按下目标按钮时禁用所有其他按钮。我的问题是,如果您最终在完全相同的时间同时按下两个按钮,那么这两个按钮都会被按下。据我所知,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>

【问题讨论】:

【参考方案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 单键按正确方式无多点触控干扰的主要内容,如果未能解决你的问题,请参考以下文章

onTouch 与多点触控和 SoundPool 运动事件

Sencha Touch App 在多点触控/Android 时冻结

WPF学习第十八章 多点触控输入

WPF学习第十八章 多点触控输入

python+appium自动化测试-单点和多点触控操作

如何在多点触控序列中有效地处理 UITouch