$scope's method called via ng-click: executed twice by IE

Question

In my controller:

$scope.homeAction = function() {
  console.log("HomeAction");
};

In my view:

<button ng-click="homeAction()">call homeAction()</button>

When clicking the button, the method gets executed as expected by Chrome and Firefox, but IE executes it twice. Any idea why?

Here is a plunker that reproduces the issue: http://plnkr.co/edit/pedZKjIVGDAYfMl0ZphJ.

Answer 1

Just add type="button"to your button and it should be fixed. Default behaviour is submit and apparently that messes with your code.

<ion-view title="Home">

  <ion-content padding="true">
    <button type="button" ng-click="homeAction()" class="button button-block button-positive">call homeAction()</button>
  </ion-content>

</ion-view>

Answer 2

It seems to be related to the <button> event handling on Internet Explorer. Clicking it dispatches 2 events : MouseEvent and PointerEvent which explains why homeAction is called twice.

The easiest solution would be to change the <button> element to another DOM element (i.e. <a> or <span>)

Updated version using an <a> element http://plnkr.co/edit/Nn8CF7TnDKqsJA3unsp6

Another solution would be to verify which type of Event is dispatched and only allow MouseEvents. You can do this by passing the $event on your HomeAction and check the existence of the pointerType property (which is only available on TouchEvents). An example on plnkr : http://plnkr.co/edit/RmVHT1Pf2IeCNdmDH51T

$scope.homeAction = function($event) {
    if ($event.originalEvent.pointerType) {
      //PointerEvent, don't do anything
      return;
    }

    console.log("HomeAction");
};