$scope 的方法通过 ng-click 调用：被 IE 执行了两次

Question

在我的控制器中：

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

在我看来：

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

单击按钮时，Chrome 和 Firefox 按预期执行该方法，但 IE 执行了两次。知道为什么吗？

这是一个重现问题的 plunker：http://plnkr.co/edit/pedZKjIVGDAYfMl0ZphJ。

Answer 1

这似乎与 Internet Explorer 上的 <button> 事件处理有关。单击它会调度 2 个事件：MouseEvent 和 PointerEvent 这解释了为什么 homeAction 被调用两次。

最简单的解决方案是将 <button> 元素更改为另一个 DOM 元素（即 <a> 或 <span>）

使用 <a> 元素的更新版本 http://plnkr.co/edit/Nn8CF7TnDKqsJA3unsp6

另一种解决方案是验证派发哪种类型的事件，并且只允许 MouseEvents。您可以通过在 HomeAction 上传递 $event 并检查 pointerType 属性是否存在（仅在 TouchEvents 上可用）来执行此操作。 plnkr 上的一个例子：http://plnkr.co/edit/RmVHT1Pf2IeCNdmDH51T

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

    console.log("HomeAction");
};

Answer 2

只需将 type="button" 添加到您的按钮，它应该会被修复。默认行为是提交，显然这会扰乱您的代码。

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

$scope 的方法通过 ng-click 调用：被 IE 执行了两次

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

javascript

angularjs

internet-explorer

ionic-framework

angularjs-ng-click