Onsen UI Navigator prevent double click

Question

I have an on-list with items that I allow users to click on. Clicking on an item takes the user to a details page. If you click fast enough it's possible that two click events get fired taking the user to one details page, then another. Is there a way to prevent this? For example can you tell the navigator to not to push another page until the navigation is complete?

Here is my code called after the list has been populated, assigning the click event:

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

I think this issue was addressed in beta.6: https://github.com/OnsenUI/OnsenUI/issues/1175 Can you check if it happens with that version? — Fran Dios, Feb 22 '16 at 02:14

score 5 · Answer 1 · edited May 23 '17 at 12:31

5

To disable this behaviour you can currently pass {cancelIfRunning: true} as a second argument to navi.pushPage. We are planning on making this the default behaviour soon, which is why it's an undocumented setting, but until then you can just call it explicitly.

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

As Fran Dios mentioned - there was an issue with this setting, but it should already be fixed in beta 6.

So as long as you are using OnsenUI beta 6 or higher you should have no problems with this setting turned on. Otherwise you can use Zakaria Acharki's solution.

edited May 23 '17 at 12:31

Community

1
1

answered Feb 22 '16 at 10:49

Ilia Yatchev

1,254
7
9

I am using OnsenUI in Monaca.io so I don't have access to beta 6. However I am very pleased to hear that the solution you propose will be included in a future release. I tried it with the version of OnsenUI in Monaca.io and it didn't work. – MoreScratch Feb 22 '16 at 18:19

score 2 · Answer 2 · edited Feb 19 '19 at 21:10

2

Try to prevent the double click by adding preventDefault() in dbclick event attached to the list items :

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

Or you could disable the list items for a while after click to prevent the fast double click on different items :

//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);

});

Hope this helps.

edited Feb 19 '19 at 21:10

marc_s

732,580
175
1,330
1,459

answered Feb 21 '16 at 17:43

Zakaria Acharki

66,747
15
75
101

So that seems to solve the problem of double clicking of the same list item, but it doesn't solve the problem where one clicks two list items in quick succession. Any ideas on how I might solve this? – MoreScratch Feb 21 '16 at 18:19
This didn't work for me. The ons-list items were not disabled. – MoreScratch Feb 22 '16 at 18:19

Onsen UI Navigator prevent double click

2 Answers2