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

或

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

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>