js如何避免不必要的点击

Question

我正在使用angular.js并且我有一个表格，每行都可以使用ng-click="launchMethodRow"点击，但是在行的确定列中我有一个按钮，当我点击该按钮时按钮，不仅触发了此按钮的功能（ng-click="launchMethodButton"），而且还启动了该行的方法。

如何避免此行为？我希望当我单击按钮时，只有按钮响应的方法运行，而不是行的方法。

Answer 1

您可以捕获与点击相关的事件并阻止其传播。

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

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

对于按钮ng-click，将点击事件（$event）向下传递给回调函数。在launchMethodButton函数中，停止事件传播。

$scope.launchMethodButton = function(event){
    event.stopPropagation();
    // execute button click logic
}

或

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

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>

Answer 2

使用$ event.stopPropagation（）：

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

Answer 3

您可以使用ng-show或ng-hide来停用该按钮，以避免不必要的点击。

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

只有当for有效时，该按钮才能点击