Javascript 如何避免不必要的点击

我使用的是

angular.js

，我有一个表格，其中每一行都可以单击，使用

ng click=“launchMethodRow”

，但在行中的一个确定列中，我有一个按钮，当我单击该按钮时，不仅会触发该按钮的功能（

ng click=“launchMethodButton”

），但行的方法也将启动

---

如何避免这种行为？我希望在单击按钮时，只运行按钮响应的方法，而不运行行的方法。

您可以使用

ng show

或

ng hide

禁用按钮，以避免不必要的单击

<input type="button" value="Login" ng-show="myForm.$valid" ng-click="sigClick(username,password)"> 

只有当for有效时，该按钮才能单击。为此使用$event.stopPropagation（）：

 <div ng-click="clicked('outer')">
      <div ng-click="clicked('inner'); $event.stopPropagation()"></div>
  </div>

---

您可以捕获与单击相关联的事件并防止其传播

假设您有一行和一个按钮，如下所示：

<div class="row" ng-click="launchMethodRow()">
    <button ng-click="launchMethodButton($event)"></button>
</div>

或

或者，您可以将传播停止逻辑包装到指令中，并将其应用于按钮，这样您就不必在控制器中执行该逻辑

angular.module('someModule', []).directive('stopClickPropagation', function () {
    return {
        restrict: "A",
        link: function (scope, element) {
            element.bind('click', function (e) {
                e.stopPropagation();
            });
        }
    }
});

<div class="row" ng-click="launchMethodRow()">
        <button ng-click="launchMethodButton()" stop-click-propagation></button>
 </div>

angular.module（'someModule'，[]）.directive（'stopClickPropagation'，function（）{
返回{
限制：“A”，
链接：功能（范围、元素）{
元素绑定（'click'，函数（e）{
e、 停止传播（）；
});
}
}
});

查看每一行始终必须显示此按钮，该按钮是每一行不可分割的一部分。好的，您可以看到，

输入类型按钮将始终对用户可见，但在条件变为真实之前它将无法单击。查看此处
ng disabled=“myForm.$valid”
非常好，我将采取指导性的方法，以实现完美的重用。这样，在进行单元测试时，您可以只测试一次指令，而不必在每个具有此逻辑的控制器中继续测试相同的逻辑。
angular.module('someModule', []).directive('stopClickPropagation', function () {
    return {
        restrict: "A",
        link: function (scope, element) {
            element.bind('click', function (e) {
                e.stopPropagation();
            });
        }
    }
});

<div class="row" ng-click="launchMethodRow()">
        <button ng-click="launchMethodButton()" stop-click-propagation></button>
 </div>