Geek Answers Handbook

$ Scope method called via ng-click: executed twice by IE

In my controller:

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

In my opinion:

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

When a button is clicked, the method executes as expected in Chrome and Firefox, but IE executes it twice. Any idea why?

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

+6
source share
2 answers

Just add type="button" to your button and it should be fixed. The default behavior is and, apparently, a mess 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>
+12
source

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

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

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

Another solution would be to check what type of event is dispatched and allow only MouseEvents . You can do this by passing $ event to homeAction and check for the existence of the pointerType property (available only for TouchEvents). Plnkr example: http://plnkr.co/edit/RmVHT1Pf2IeCNdmDH51T

 $scope.homeAction = function($event) { if ($event.originalEvent.pointerType) { //PointerEvent, don't do anything return; } console.log("HomeAction"); };
+2
source

More articles:


All Articles