Cancel Ng-click firing when moving off element

[CoenWarmer]

When I tap and hold an item with ng-href, and I move my finger off the element and let go, it fires. This happens to elements within content that has scroll set to false.

On other elements such as the back button or elements within content with scroll set to true, you can 'cancel' the link from firing by moving your finger off the element before letting go.

Is it possible to have the same behavior in the first case as in the second case?

[adamdbradley]

Yes they should be the same. I'll start digging into it, thanks.

[CoenWarmer]

@adamdbradley Any progress on this?

[adamdbradley]

I can't replicate this issue and it may be due to this recent fix that's currently in the nightly builds:
#745

@CoenWarmer Would you be able to double check if this issue is fixed or not? Thanks

[CoenWarmer]

Hey @adamdbradley Thanks for this.

Just checked it out with the nightly. It's not happening in browser anymore, but it is still happening on iOS simulator and device.

[adamdbradley]

There have been some more scroll/tap changes and hopefully they fixed this one. I tested it by setting scroll to both true and false on a ion-content, pressed on a link, then moved off of it. When I moved off it did not fire the click. Am testing this correctly? Could you test it also and let me know if it fixed this issue? Thanks

[CoenWarmer]

@adamdbradley Sorry for not getting back sooner, this slipped my mind.

This is still happening in the 1.0 beta1 on iOS device and simulator. Happening on <a> elements with ng-click, placed within ion-content.

[CoenWarmer]

Issue not fixed, needs to be reopened

[ajoslin]

@CoenWarmer can you give some code that reproduces this problem on an iOS device?

[CoenWarmer]

Sure @ajoslin, here goes:

<ion-view title="Home" hide-nav-bar="true">

  <ion-content class="noheader has-footer bg" padding="false" scroll="false">

    <img class="center" ng-src="img/logo.png" id="logo" alt="logo" />

        <div class='menu_navigation center'>
            <a class='menu_button_news menu_button' ng-href='#/artists'>Artiesten</a>
            <a class='menu_button_program menu_button' ng-href='#/program'>Programma</a>
            <a class='menu_button_map menu_button' ng-href='#/map'>Map</a>
            <a class='menu_button_information menu_button' ng-href='#/information'>Info</a>
        </div>
    </ion-content>
</ion-view>

[CoenWarmer]

@ajoslin any luck in reproducing this on device?

[CoenWarmer]

Reading @adamdbradley's answer again makes me think maybe I'm not explaining this correctly. (@ajoslin)

I'm not talking about a ghost tap behavior here. What I mean is that when you press your finger down on a link, and you then keep pressing your finger on the screen but you move your finger off the area of the link and then remove your finger from the screen, it is still recognized as a tap on the link. In native apps, you can 'cancel' clicking on a link by moving your finger off the link area and then removing your finger from the screen.

In the 1.0.0 beta this already works on desktop: when you click the mousebutton on a link, keep pressing it, and move the mouse from the original hit area and release the mouse button, the action of clicking on that link is not fired. But on iOS device, simulator and Android it fires always regardless of whether you move your finger off.

[ajoslin]

I will test this out when I start today.
On Apr 4, 2014 3:47 AM, "Coen Warmer" notifications@github.com wrote:

Reading @adamdbradley https://github.com/adamdbradley's answer again
makes me think maybe I'm not explaining this correctly. (@ajoslinhttps://github.com/ajoslin
)

I'm not talking about a ghost tap behavior here. What I mean is that when
you press your finger down on a link, and you then keep pressing your
finger on the screen but you move your finger off the area of the link and
then remove your finger from the screen, it is still recognized as a tap on
the link. In native apps, you can 'cancel' clicking on a link by moving
your finger off the link area and then removing your finger from the screen.

In the 1.0.0 beta this already works on desktop: when you click the
mousebutton on a link, keep pressing it, and move the mouse from the
original hit area and release the mouse button, the action of clicking on
that link is not fired. But on iOS device, simulator and Android it fires
always regardless of whether you move your finger off.

Reply to this email directly or view it on GitHubhttps://github.com//issues/579#issuecomment-39548052
.

[adamdbradley]

@ajoslin I'm already working on it

[ajoslin]

Sounds good!
On Apr 4, 2014 6:50 AM, "Adam Bradley" notifications@github.com wrote:

@ajoslin https://github.com/ajoslin I'm already working on it

Reply to this email directly or view it on GitHubhttps://github.com//issues/579#issuecomment-39561112
.

[CoenWarmer]

Thanks guys! I really appreciate it.

[adamdbradley]

I started taking everything away to figure out where the code is that's causing (or not preventing) the clicks and started to think that this issue may be directly in the browsers. So I created this bare bones demo for testing: http://run.plnkr.co/nKYergyzLGjTjjMJ/

On iOS7, if you tap and hold one of the yellow links, then slide off the link to the left or right, in most cases it still navigates to that link. If you tap and hold, then slide off to the top or bottom, most times it does not fire the click. Is this the behavior you're experiencing?

[CoenWarmer]

In this specific case my hypothesis would be that when the page is scrolled vertically when you move your finger off the link, it cancels triggering the link. (EDIT: Talking about iOS7 here)

If you press down on the link and you move up or down, the content field is scrolled, thus leading to the link being cancelled when you remove your finger from the screen. If you move your finger to the left without scrolling the page vertically, the link does indeed fire. If you accidentally scroll the page whilst moving to the left or right, the link is cancelled again.

[CoenWarmer]

What I'm noticing when doing some tests is that the a element is receiving an active class when I put my finder on it, and that active class is removed once my finger moves off the element. Wouldn't that be the place to 'cancel' the firing of the link?

So pseudo code:

• on tap add class active
• on move off element:
  • remove class active
  • prevent default
• on move on element again:
  • add class active
  • set link target again

[adamdbradley]

@CoenWarmer The problem I addressed was that if a touchstart started on an anchor element, and was held down, then the touch was dragged somewhere else, on touchend it didn't correctly report the coordinates of where the touchend happened, but instead still reported the original touchstart coordinates, which made it think that no scroll happened and the click was valid to go through.

I updated it to use touchmove also, but once the touchmove has passed the allowed distance it removes itself in order to not fire off unnecessary touchmove events. Please give the latest build a shot and let me know if it addressed your issue. Thanks.

[CoenWarmer]

@adamdbradley Yes!! That's it! Fantastic!! 👍

I noticed the class that's being added to elements on touch is now 'activated' instead of 'active' like before. Not a big deal to change in the CSS- Just noting it here cos people might have been using .active in their CSS files before.

[ajoslin]

.active still works - 'activated' is added by Ionic when you touch the element, active is for doing things programatically (like active button is highlighted).

[adamdbradley]

[CoenWarmer]

@ajoslin Ok great, but this is a change in behavior of the 1.0.0beta 1 so might want to note this in a changelog when the next release rolls around. Thanks again guys!! Have a good weekend.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.