Ionic-framework: ngClick Fires Twice on Button

[calendee]

Clicking a button causes ng-click event to fire twice.

Forum : http://forum.ionicframework.com/t/strange-behavior-when-overriding-a-cordova-function/2468

Sample : http://codepen.io/anon/pen/JrpuB

[adamdbradley]

Notes so I don't forget:
Adding var cordova = {}; fires multiple clicks
Once var cordova = {} is commented out its back to normal.

[adamdbradley]

Basically with the global cordova object present then Ionic thinks that's it actually using cordova, so it was waiting for cordova's device to be ready before adding the tap event listeners which prevents ghostclicks.

I've modified it so it always adds the ghostclick prevent stuff, and if/when the device it also modifies the prevent time for older devices.

[EnchanterIO]

Hi, I installed ionic with yo ionic
bower_components
{
"name": "ionic",
"version": "1.0.0-beta.6",
"codename": "cadmium-camel",

The button is still firing twice.

[kschio]

Same issue, after ng-click was executed once, it fires a second time wherever the user clicks.

Is there a way to prevent this?

PS: Even with the latest nightly on iOS.

[rodneyjoyce]

FYI: I am still getting this on the 1.0.0 Beta 13 build. It is only during development - when deployed to a device it works. I am using Telerik AppBuilder which does some funky stuff with Cordova.js at dev time...

[KernelInfernal]

Have the problem in win8 / Cordava environment. Helped myself with a boolean, that prevents a second execution, as long as the event handler is active.

[MBehtemam]

I have the same problem, is anyone solve this problem?

[joeandrews]

+1

[Giwi]

+1

[fabiobiondi]

+1

[robsilv]

+1. ion-nav-back-button fires twice for me in RC0.

[danmatthews]

+1 - Still getting this on RC0 too.

[chrisschaub]

And on 1.0.0-rc.5
Also, the default sidemenu app, no customizations, has this issue. Just click the Login link in the menu, fires twice. Now, I am using the icenium simulator.

UPDATE: It's an issue with Icenium's emulator.

[motek80]

Having the same problem on 1.0.0-rc.5

This problem doesn't happen on "Ripple", but it does happens on physical device (Android 5.0.2).

Every click on button (bound using ng-click) is fires twice. However, the call is getting from separate places. It looks like the second call came from "tapTouchEnd" method.

function tapTouchEnd(e) {
//console.log('touchend ' + Date.now());
if (tapIgnoreEvent(e)) return;

tapEnableTouchEvents();
if (!tapHasPointerMoved(e)) {
tapClick(e);

if ((/^(select|option)$/i).test(e.target.tagName)) {
  e.preventDefault();
}

}

tapLastTouchTarget = e.target;
tapTouchCancel();
}

Please assist, this is a critical problem.

[jlkalberer]

+1

[michael8090]

+1

[motek80]

After additional investigation, turns out that the problem is due to Ionic Material. When click happens, first callback came from Material, and right after that second call from Ionic.

[jlkalberer]

I'm seeing this and I don't have Material installed.

For me, the issue is coming from this - https://github.com/driftyco/ionic/issues/2885

I hope a patch can be added at some point but this will work for now.

[bruno-machado]

I found the following solution on internet. creating a directive.I have Material Angular installed with Ionic.

app.directive('myclick', function() {
    return function(scope, element, attrs) {
        element.bind('touchstart click', function(event) {
            event.preventDefault();
            event.stopPropagation();
            scope.$apply(attrs['myclick']);
        });
    };
});
app.controller('Main', function ($scope) {

    $scope.anything = function() {

        alert('Anything');
    };
});

before

<a href="#" ng-click="anything()">click</a>

now

<a href="#" myclick="anything()">click</a>

[iamsamwood]

@bruno-machado that worked for me, thanks!

[UrVerySpecial]

In My case,
https://github.com/angular/material/issues/1406
this is worked.

.config(function( $mdGestureProvider ) {
          $mdGestureProvider.skipClickHijack();
      });

[cmauroie]

@bruno-machado worked, thanks!
@JungmoKang worked, thanks!

[sinsubj]

I'm using Angular Material with Ionic.
I was afraid I had to use mnTouch directives all over my code, but
@JungmoKang your solution did it for me. Thank you!

[rafaelcremer]

In My case,
a work-around for the problem I have with the back button on WP

var locked = false;
$scope.GoBack = function($event) {      
     if (locked == false) {         
        $ionicHistory.goBack(); 
        locked = true;
        setTimeout(function(){ locked = false; }, 50);
     }
 }

[jasdeepsingh]

As mentioned by @JungmoKang following worked for me:

.config(function($mdGestureProvider) {
  $mdGestureProvider.skipClickHijack();
}))

[QiaoyuanMaxDeng]

@jasdeepsingh @JungmoKang
this works for me too. thanks

.config(function($mdGestureProvider) {
  $mdGestureProvider.skipClickHijack();
}))

[rhperera]

@JungmoKang I had the same problem with ionic + md angular. Adding your code worked for me. thanks

.config(function($mdGestureProvider) {
  $mdGestureProvider.skipClickHijack();
}))

[mlemainque]

I had the same problem with [email protected] + [email protected] built for an Android app, but none of the previous solutions worked for me.

I finally got it to work with a small change in @bruno-machado solution:

    app.directive('myclick', function() {
        return function(scope, element, attrs) {
            element.bind('touchstart click', function(event) {
                event.preventDefault();
                event.stopPropagation();
                if (event.type === 'click') {
                    scope.$apply(attrs['myclick']);
                }
            });
        };
    });

<md-button myclick="fireClick()">My button</md-button>

Thanks,

[chrisschaub]

Change from anchor link to button. Anchor links fire twice.

On Mon, Jan 11, 2016 at 9:52 AM, Matthias Lemainque <
[email protected]> wrote:

I had the same problem with [email protected] + [email protected] built
for an Android app, but none of the previous solutions worked for me.

I finally got it to work with a small change in @bruno-machado
https://github.com/bruno-machado solution:

app.directive('myclick', function() {
    return function(scope, element, attrs) {
        element.bind('touchstart click', function(event) {
            event.preventDefault();
            event.stopPropagation();
            if (event.type === 'click') {
                scope.$apply(attrs['myclick']);
            }
        });
    };
});

Thanks,

—
Reply to this email directly or view it on GitHub
https://github.com/driftyco/ionic/issues/1022#issuecomment-170593665.

Christopher Schaub
http://chris.schaub.com

[joaotocilo]

I had the same case. Works removing Angular Material.

[axsaucedo]

@rhperera adding that code fixed it for me as well. How can this be incorporated as a fix?

[farisfawaaz]

@bruno-machado hey man, thanks a lot. Works how it should now! saved me a lot of time! btw this was my first directive! have no clue what i copied :P

[chengen]

@JungmoKang works for me.

[jhlee8804]

@JungmoKang thanks!!!! lol

[mavillar]

@JungmoKang Works like a charm!! Thanks!

[mayoraservices]

hello every one i face same issue. ng-submit fire twice time on android device. i used angular material in ionic framework. how to stop twice time fire ng-submit...??? please help meee

[paradite]

@rhperera hey, your version of the fix has an extra ) at the end. Mind correcting that?

[johnbolsberg]

@paradite @chengen how can i solve it in ionic 2?

[caomus-tp]

@JungmoKang
works for me. Thank you.

[jdddog]

@JungmoKang
Thanks, works for me! (Using Ionic 1.3.0 and angular-material 1.1.0-rc.5 together)

[atoami]

@bruno-machado How can I create and use this directive in Ionic 2?

[bruno-machado]

Hi @jonathan68 I'm not familiar yet with Angular2,To tell you the truth, I've never used Ionic2, but I think it's something like:

@Component({
selector: 'my-app',
template: `

})
export class AppComponent {
onClick() {
return function(scope, element, attrs) {
element.bind('touchstart click', function(event) {
event.preventDefault();
event.stopPropagation();
scope.$apply(attrs['myclick']);
});
};
}
}

[ionitron-bot[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.