Onsen UI Navigator阻止双击

Question

我有一个列表，其中包含允许用户点击的项目。单击某个项目会将用户带到详细信息页面。如果你点击足够快，可能会触发两个点击事件，将用户带到一个详细信息页面，然后是另一个。有办法防止这种情况吗？例如，您可以告诉导航器在导航完成之前不要推送另一页吗？

这是我的代码在填充列表后调用，分配click事件：

$( '#myList .item', this ).on( 'click', function() {    
    navi.pushPage( "details.html" ) );
});

Answer 1

要禁用此行为，您当前可以将{cancelIfRunning: true}作为第二个参数传递给navi.pushPage。我们计划很快将其作为默认行为，这就是为什么它是一个未记录的设置，但在此之前你可以明确地调用它。

 navi.pushPage('details.html', {cancelIfRunning: true});

正如Fran Dios所提到的 - 有一个issue有这个设置，但它应该已经在beta 6中修复。

因此，只要您使用OnsenUI beta 6或更高版本，就可以在打开此设置时遇到任何问题。否则你可以使用Zakaria Acharki's solution。

Answer 2

尝试通过在附加到列表项的preventDefault()事件中添加dbclick来防止双击：

$( '#myList .item', this ).on( 'dbclick', function(e) {    
    e.preventDefault();
});

或者，您可以在单击后禁用列表项一段时间，以防止快速双击不同的项目：

//Example of disabling list for 1 second after click
$( '#myList .item', this ).on( 'click', function(e) {    
    e.preventDefault();
    navi.pushPage( "details.html" ) );

    $('#myList .item').prop('disabled', true);
    setTimeout(function(){
         $( '#myList .item').prop('disabled', false);
    }, 1000);

});

希望这可以帮助。