js如何避免不必要的点击

我正在使用angular.js，我有一个表，其中每行可以点击，使用ng-click="launchMethodRow"，但在行中的确定列我有一个按钮，当我点击该按钮时，不仅该按钮的功能被触发（ng-click="launchMethodButton"），而且该行的方法被启动。js如何避免不必要的点击

我该如何避免这种行为？我想单击按钮时，只有按钮响应的方法运行，而不是行的方法。

来源

2016-07-06 mos

请在[这里]看看（https://stackoverflow.com/questions/15193539/whats-the-best-way-to-cancel-event-propagation-between-nested-ng-click-calls ） –

你能赶上与点击有关的事件并阻止它传播。

比方说你有一排按钮，像这样：

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

来源

2016-07-06 04:22:36 Chanthu

非常好，我会采取指令的方式，以便重用。 – mos

@mos完美。通过这种方式进行单元测试时，您可以仅测试一次指令，而无需继续使用此逻辑在每个控制器中测试相同的逻辑。 – Chanthu

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

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

按钮将能够点击，只有当为有效

来源

2016-07-06 04:15:53

每行总是要显示这个按钮，这个按钮是每一行的一个组成部分。 – mos

好吧，没问题，你看到'input type button'对用户总是可见的，但它不能点击直到条件成为真。看看这里'ng-disabled =“myForm。$ valid”' –

尝试使用ng -disabled insted的ng-show –

使用$ event.stopPropagation（）这个：

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

来源

2016-07-06 04:20:49 Keshav

js如何避免不必要的点击

回答

相关问题