Disable click onScroll list

ionic-v1
1

Hi,

I would like to know if there is a way to disable click when scrolling in a list (or when sliding). I put an action ng-click in an element <li> in a list. The following just appears in a web browser (it works fine in mobile webview with android) : the user starts scrolling and moving the mouse, when he releases the mouse, the click event trigger.

<content>
    <ul class="list">
        <li ng-click="addFriend(friend,$event)">
            <h4>{{friend.name}}</h4>
        </li>
    </ul>
</content>

The same behaviour happen if there is a side menu: if the user click on the list and then slide to reveal the side menu, it will trigger 2 actions: open the menu and trigger a click on the list.

Is there anyway to make a difference between a click which is the consequence of the end of scrolling with the mouse and a “normal” click? For the side menu case, can’t we attach any listners on the list, if we use a side menu?

thank you!

1 Like
2

I’m also curious if there’s a solution for this. Would make testing easier. Seems to work ok on the actual phone though.

3

I’ve never noticed this before, but it clearly is a problem.

See this sample : http://codepen.io/calendee/pen/yqefG

I’ve opened Issue # 745 : https://github.com/driftyco/ionic/issues/745

4

I’m including ngTouch and I don’t have this problem.

5

This issue is fixed in the nightlies.

Let me know if anyone else has trouble.

6

Perfect it is working fine!

7

i just tested the code you have in the codepen, and the click event is consistently firing?

I cam across this posting because I ma having an issue with clicks on hrefs firing off when scrolling through a list and thought the answer might be to just change the hrefs to ng-clicks

8

Bummer… This problem has resurfaced. I’ve updated the issue on GitHub.

Here’s the new sample : http://codepen.io/calendee/pen/gHxde

9

So Adam says this is just a problem with trying to do a touch demo in a non-touch device.

However, with the nightlies downloaded and running locally (not CodePen), the click event does not fire on scroll in the browser or on device.

11

It seems like this issues has not really been fixed.

The problems I’m facing at the moment is with iOS momentum.

iOS doesn’t fire any scroll events while the user’s finger are off the screen, but only when user perform a “touchmove”, in addition to another extra event that fires when the scroll actually ends (on momentum scrolling ends).

This interferes with the ionic.scroll.isScrolling helper as it is detected by onScroll. Nevertheless, all my custom attempt to check if the momentum is running (e.g. by watching offsetTop attribute of a key element) have failed.

The only solution I’ve found is to attach a data-tap-disabled to the list container, but this of course will create a laggy experience when taping on a list item.

Does anyone got over this issue somehow?

12

i have it also right now , and i am on the last ionic 1 version it’s 1.3

and i noticed it’s appear when using ion-nav-view

if u moved ur list outside the ion-nav-view u will never see the issue again

so any advice ? or fixing ?

13

Met with the same issue.
Yes, add data-tap-disabled="true" to list container did do the trick. And the laggy experience is acceptable for my case.