Question

我正在使用phonegap和jquery mobile开发移动应用程序。我用数据角色等创建了布局......在这个应用程序中，我有很多按钮，如下所示，可以转到不同的页面。（我没有专门将点击事件绑定到这些按钮，他们只是使用href来表示魔法）。

<a data-role="button" href="#page6">
    go to page 6
</a>

这些按钮的问题在于它们非常慢，每个人都在谈论400毫秒的延迟。 是否可以使用tap / vclick / touchstart （无论什么是最好的）替换这些按钮上的所有事件，以便他们立即响应？他们将永远不必处理双击或人们拖延......

由于

Answer 1

我写了a JS utility called Lightning Touch来摆脱那种延迟。 Here's me demonstrating it (badly).

该库的基础是Google的fastButtons，它显然已不再可用（或者如果是，URL已更改）但过去在code.google.com的Creative Commons许可下可用。

Lightning Touch会触发touchend而不是touchstart，但我怀疑你可以修改它以便在没有太多努力的情况下在touchstart上工作，如果它不适合你。

在演示文稿中，Brian Leroux有a slide about the 400ms-ish delay issue that said "PPL HAVE SOLVED THE SHIT OUT OF THIS."他链接到了一些项目，如果Lightning Touch不适用于您的情况，您可能会看到这些项目。如果那些失败了你，你可以尝试查看this other list that he linked to in the same presentation。

希望有一个适合你的解决方案。（如果Lightning Touch不起作用，我很想知道为什么我可以改进它。）

Answer 2

尝试这个库：quojs它对我来说非常有用。

这是一个例子（触摸功能非常快）我在这里切换课程：

$$("#man").touch(function(){
    switchGender(true);
});

$$("#woman").touch(function(){
    switchGender(false);
});

$$(".next").touch(function(){
    nextPage();
});

Answer 3

这个微小的代码应该有所帮助：

$("a").on("tap",function(e){
                         $(this).trigger("click");
                         e.preventDefault();
                         return false;
                         });

把它放进

$(document).on("ready",function(){

瞧！

Answer 4

这个插件将有很大帮助

$.fn.addTouch = function() {
    if ($.support.touch) {
            this.each(function(i,el){
                    el.addEventListener("touchstart", iPadTouchHandler, false);
                    el.addEventListener("touchmove", iPadTouchHandler, false);
                    el.addEventListener("touchend", iPadTouchHandler, false);
                    el.addEventListener("touchcancel", iPadTouchHandler, false);
            });
    }
};

http://code.google.com/p/jquery-ui-for-ipad-and-iphone/

Answer 5

此脚本将测试设备是否启用了触摸功能，然后将替换事件替换为touchend事件。它为两个链接和JavaScript onclick元素属性添加了触摸事件。脚本已经在Android，iPhone，iPad和Windows Phone上进行了测试。

//jQuery doc.ready
$(function () { 
    addTouchEvents();   
});

addTouchEvents = function() {
    var isTouchDevice = (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch);

    if (isTouchDevice) {
        //replace link clicks with ontouchend events for more responsive UI
        $("a", "[onclick]").on("touchstart",function(e) {
            $(this).trigger("click");
            e.preventDefault();
            return false;
        });
    }
}

使用jquery mobile中的点击替换所有点击事件以加快速度

5 个答案: