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

admin管理员组

文章数量:1278855

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: .

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.

• javascript
• angularjs
• internet-explorer
• ionic-framework
• angularjs-ng-click

Share Improve this question Follow asked Aug 19, 2015 at 8:41 sp00msp00m 48.8k3131 gold badges150150 silver badges259259 bronze badges 6

• @TributetoAPJKalamSir Tested with IE 11. – sp00m Commented Aug 19, 2015 at 8:47
• Executes only once on IE 11 – Deepak Ingole Commented Aug 19, 2015 at 8:47
• @TributetoAPJKalamSir Weird! Just tried on browserstack., still reproducing... – sp00m Commented Aug 19, 2015 at 8:50
• github./driftyco/ionic/issues/2885 – Deepak Ingole Commented Aug 19, 2015 at 8:51
• Yup even I also reproduces the same. Shocking. – Deepak Ingole Commented Aug 19, 2015 at 8:51

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 13

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>

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");
};

本文标签： javascriptscope39s method called via ngclick executed twice by IEStack Overflow