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如何避免不必要的點擊

回答

相關問題