按钮单击Android Kit Kat仅在phonegap构建应用程序中多次单击后激活

时间:2014-06-28 23:20:58

标签: javascript android jquery cordova

我最近制作了一个phonegap应用程序,其中有一个菜单可以从左侧滑入视图,并在您单击实际菜单上的链接时关闭。

我正在使用jquery插件快速点击触摸设备上的300毫秒延迟。下面是滑入菜单的代码。

$('#showLeftPush').click(function (e) {
                e.preventDefault();
                if ($(this).hasClass('show')) {
                    $("#cbp-spmenu-s1").animate({
                            left: "-=130"
                        }, 300, function () {
                            // Animation complete.
                            console.log('menu closed');
                        });
                    $(this).removeClass('show').addClass('hide');
                }
                else {
                    $("#cbp-spmenu-s1").animate({
                            left: "0"
                        }, 300, function () {
                            // Animation complete.
                            console.log('menu open');
                        });
                    $(this).removeClass('hide').addClass('show');
                }
                console.log('menu clicked');
            });

在kit kat 4.4.1之前,代码在早期版本的android上运行良好。当我点击showLeft按钮时,有时菜单只会在大约10个左右后打开。

是否有我应该知道的东西或者我错过了什么。

请帮助,我已经和这个问题坐了2天了。

2 个答案:

答案 0 :(得分:0)

您可以尝试使用Tap Event而不是点击Android Kitkat。

$('#showLeftPush').on("tap", function (e) {
                e.preventDefault();
                if ($(this).hasClass('show')) {
                    $("#cbp-spmenu-s1").animate({
                            left: "-=130"
                        }, 300, function () {
                            // Animation complete.
                            console.log('menu closed');
                        });
                    $(this).removeClass('show').addClass('hide');
                }
                else {
                    $("#cbp-spmenu-s1").animate({
                            left: "0"
                        }, 300, function () {
                            // Animation complete.
                            console.log('menu open');
                        });
                    $(this).removeClass('hide').addClass('show');
                }
                console.log('menu clicked');
            });

希望这会有所帮助..

答案 1 :(得分:0)

你试过jQuery mobile中的简单Panel widget吗?给出一个样本

<div data-role="panel" id="mypanel" data-theme="b">
            <h3 align="center">Menu</h3>
            <ul id="list" data-role="listview" data-inset="true">           

                    <li><a href="driving_style.html" target="testframe" onclick=" header('Driving style')" data-rel="close">Driving style</a></li>
                    <li><a href="history.html" target="testframe" onclick=" header('History')" data-rel="close">History</a></li>
                    <li><a href="policy.html" target="testframe" onclick=" header('Policy')" data-rel="close">Policy</a></li>
                    <li><a href="contact_us.html" target="testframe" onclick=" header('Contact us')" data-rel="close">Contact us</a></li>
                    <li><a href="settings.html" target="testframe" onclick=" header('Settings')" data-rel="close">Settings</a></li>
            </ul>

        </div>