Question

我不能让所有这些一起工作。我在iOS上完全使用fastclick.js运行phonegap / JQM。这只是个梦。但由于某些原因，我仍然在Android上有300毫秒的延迟。我发了一些警报并且正在调用代码。真是令人费解。我正在测试摩托罗拉droid razor maxx。

在我的index.html文件中：

<!DOCTYPE html>
<html>
    <head>
        ...
        <script type='application/javascript' src='js/fastclick.js'></script>
    </head>
    <script>
    $(document).on("pagebeforechange", function (e, data) {
        FastClick.attach(document.body);
        alert('fastclick attached');
        var to_page = data.toPage[0].id;
        // skip showing #myPage if condition is true
        if (to_page == "index") {
            $.mobile.pageContainer.pagecontainer('change', 'event-list.html');
            e.preventDefault();
        }
    });

    </script>
    <body>
        <div id="index" data-role="page">
        This is the index page.
        </div>
    </body>
</html>

但它似乎不起作用。我也尝试过将它附加起来：

window.addEventListener('load', function() {
    new FastClick(document.body);
}, false);

哪个都适用于iOS，但似乎对Android没有任何影响。有什么建议吗？

编辑：似乎我删除了JQuery库它运行正常。某处必须发生冲突。知道它可能是什么？我正在使用JQM 1.4。

编辑：我也尝试使用vclick无效

$("#test-element").bind('vclick',function() {
    $.mobile.pageContainer.pagecontainer('change', 'description.html?lunch_pk=2133',{
        transition: "slide",
    });
});
...
<h1 id='test-element'> CLICK HERE FOR TEST </h1>

我也在使用手势来更改也会延迟300毫秒的页面，因此即使vclick正在运行，我也不认为这将是一个完整的解决方案。

编辑：好的，经过一些进一步的测试后，我很确定延迟是来自JQM页面更改功能。我在vclick中做了一个console.log，按下按钮时日志非常敏感。我试图挖掘JQM，但不是很成功，我的意思是为什么它在iOS上似乎无法在android上工作？也许我只需要找到一个更好的移动库。

答案

我无法解决这个问题。我的解决方案是切换库。我去了英特尔的移动应用程序框架，它能够更成功地完成我对JQM所做的一切。

Answer 1

您可以尝试vclick而无需尝试onclicks。这些内置的jQuery Mobile vclick省略了300ms的延迟。我是这样做的。

$("#element").bind('vclick',function(event) {
   yourFunction(this.id);
   event.preventDefault();// this prevents the default click event
});

Answer 2

您是否尝试过打开jQueryMobile库文件？有一些功能，如：

setTimeout(function() {
    $link.removeClass( $.mobile.activeBtnClass );
    }, 300 );

我确信，搜索此文件“延迟”或“超时”并更改它会产生良好的结果。上面的行来自

.mobile.popup.handleLink = function( $link ) {
    ...
}

Answer 3

尝试在deviceready事件处理程序中注册FastClick：

document.addEventListener('deviceready', function() {
    FastClick.attach(document.body);
}, false);

Answer 4

你有没有尝试过点击事件？

$("#test-element").off('tap').on('tap', function(event) {...do your stuff});

请注意，不推荐使用.bind - 更好地使用开/关

请注意，根据您附加事件处理程序的位置，事件处理程序可能会在pagechange上多次绑定并重新访问。

您最好在pageinit事件中绑定您的点击事件处理程序，以确保您只关注事件一次，而不是每次都重新访问某个页面。

如果您在页面显示上附加，请先使用“关闭”（见上文）

Answer 5

我遇到了一些菜单按钮的问题。我的解决方案适用于没有帮助库的所有平台，但是，我希望有更好的方法来设置JQM变量：

$('#button').unbind('touchstart click').bind('touchstart click', function(event) {
    $('#button').addClass('ui-btn-active');
    //doSomethingHere();
    setTimeout(function() {
        $('#button').removeClass('ui-btn-active');
    }, 300); //this 300ms is just the delay for styling the button
    event.preventDefault(); //if touchstart is supported, do not let the event propagate to the click handler.  Having this here avoids a double trigger.
});

键是绑定到touchstart，立即触发。

注意 - 我在pageshow处理程序中有这个代码，这就是我取消绑定然后绑定它的原因。否则，当用户导航到此页面或从该页面导航时，您最终会绑定多次相同的事件。

Answer 6

JQM中有与页面转换动画相关的持续时间。以下是一些默认＆＃39; fade＆＃39;的CSS。转换（来自jquery.mobile.structure.css v1.4.2）：

.fade.out {
  opacity: 0;
  -webkit-animation-duration: 125ms;
  -webkit-animation-name: fadeout;
  -moz-animation-duration: 125ms;
  -moz-animation-name: fadeout;
  animation-duration: 125ms;
  animation-name: fadeout;
}
.fade.in {
  opacity: 1;
  -webkit-animation-duration: 225ms;
  -webkit-animation-name: fadein;
  -moz-animation-duration: 225ms;
  -moz-animation-name: fadein;
  animation-duration: 225ms;
  animation-name: fadein;
}

当转换开始和完成时，JQM会更改to和from页面上的类，因此在“fade”的情况下。在页面完成淡出（125ms）之后，即在350ms之后，被转换为的页面将成为225ms的活动页面。

您可以尝试通过在{transition: 'none'}的通话中指定$.mobile.pageContainer.pagecontainer('change'或在$.mobile.defaultPageTransition = "none";事件处理程序中设置mobileinit来将其视为原因，从而禁用转换延迟。

由于性能不佳和闪烁（Android），我一直禁用我的Phonegap JQM应用中的页面转换，但我仍然有响应问题，尤其是在Android上。我认为这取决于webview如何优先渲染DOM。我发现，通过允许webview推迟我的应用程序逻辑直到它呈现DOM之后，战略定位的setTimeout可以使页面更改看起来更具响应性。

fastclick.js JQuery Mobile Phonegap和Android

答案

6 个答案: