Button Click on Android Kit Kat 只有在 phonegap build app 中多次点击后才会激活答案

【问题标题】：Button Click on Android Kit Kat only activates after many clicks in phonegap build appButton Click on Android Kit Kat 只有在 phonegap build app 中多次点击后才会激活
【发布时间】：2014-06-30 17:32:00
【问题描述】：

我最近构建了一个 phonegap 应用程序，它的菜单从左侧滑入视图并在您单击实际菜单上的链接时关闭。

我正在使用 jquery 插件 fastclick 来消除触摸设备上的 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 次左右后才会打开。

有什么我应该知道的还是我错过了什么。

请帮忙，我已经解决这个问题两天了。

【问题讨论】：

为什么不能使用touchstart 事件而不是click ？

标签： javascript android jquery cordova

【解决方案1】：

您可以尝试使用 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');
            });

希望这会有所帮助..

【讨论】：

【解决方案2】：

你在 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>

【讨论】：