Onsen UI Navigator 防止双击

Question

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

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

$( '#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

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

$( '#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);

});

希望这会有所帮助。