AngularJS ng-单击触发两次

基础概念

AngularJS 是一个用于构建单页应用程序（SPA）的 JavaScript 框架。它通过双向数据绑定和依赖注入简化了前端开发。ng-click 是 AngularJS 中的一个指令，用于在用户单击元素时触发一个表达式或函数。

类型

ng-click 是一个事件绑定指令，用于处理点击事件。

应用场景

ng-click 常用于以下场景：

表单提交
按钮点击
菜单切换
图片轮播

问题描述

在某些情况下，ng-click 可能会触发两次，这通常是由于以下原因之一：

事件冒泡：如果元素嵌套在其他可点击元素中，事件可能会冒泡到父元素，导致 ng-click 触发两次。
重复绑定：如果在 HTML 中多次绑定同一个 ng-click 指令，或者在控制器中多次注册同一个事件处理函数，也会导致 ng-click 触发两次。
浏览器插件或扩展：某些浏览器插件或扩展可能会干扰正常的事件处理机制。

解决方法

1. 阻止事件冒泡

可以使用 event.stopPropagation() 方法阻止事件冒泡：

<button ng-click="doSomething($event)">Click Me</button>

$scope.doSomething = function(event) {
  event.stopPropagation();
  // 你的逻辑代码
};

2. 检查重复绑定

确保在 HTML 中没有重复绑定 ng-click 指令，并且在控制器中没有重复注册事件处理函数。

3. 禁用浏览器插件或扩展

尝试禁用可能干扰事件处理的浏览器插件或扩展，看看问题是否解决。

示例代码

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <title>AngularJS ng-click Example</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
  <button ng-click="doSomething($event)">Click Me</button>
  <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
      $scope.doSomething = function(event) {
        event.stopPropagation();
        alert('Button clicked!');
      };
    });
  </script>
</body>
</html>