问

AngularJS ng-单击stopPropagation

mobiledu2502911415 发布于 2023-02-13 17:31

我在表行上有一个单击事件,在这一行中还有一个带有单击事件的删除按钮.当我单击删除按钮时,也会触发行上的单击事件.

这是我的代码.


  
    {{user.firstname}}
    {{user.lastname}}
    {{user.email}}



showUser当我单击表格单元格中的删除按钮时,如何防止触发事件？



        
        3 个回答
        
                        
                ngClick指令(以及所有其他事件指令)创建$event在同一范围内可用的变量.此变量是对JS event对象的引用,可用于调用stopPropagation():

<table>
  <tr ng-repeat="user in users" ng-click="showUser(user)">
    <td>{{user.firstname}}</td>
    <td>{{user.lastname}}</td>
    <td>
      <button class="btn" ng-click="deleteUser(user.id, $index); $event.stopPropagation();">
        Delete
      </button>
    </td>              
  </tr>
</table>


PLUNKER

        

                
                    2023-02-13 17:32  回答
                       时间证明一2602891163
                
            

                        
                Stewie答案的补充.如果您的回调决定是否应该停止传播,我发现将$event对象传递给回调很有用:

<div ng-click="parentHandler($event)">
  <div ng-click="childHandler($event)">
  </div>
</div>


然后在回调本身中,您可以决定是否应该停止事件的传播:

$scope.childHandler = function ($event) {
  if (wanna_stop_it()) {
    $event.stopPropagation();
  }
  ...
};

        

                
                    2023-02-13 17:32  回答
                       蔡士奇佳霖哲维
                
            

                        
                我写了一个指令,允许你限制点击有效的区域.它可以用于像这样的某些场景,因此您不必根据具体情况处理点击,而只是说"点击不会来自此元素".

你会像这样使用它:

<table>
  <tr ng-repeat="user in users" ng-click="showUser(user)">
    <td>{{user.firstname}}</td>
    <td>{{user.lastname}}</td>
    <td isolate-click>
      <button class="btn" ng-click="deleteUser(user.id, $index);">
        Delete
      </button>
    </td>              
  </tr>
</table>


请记住,这会阻止最后一个单元格的所有点击,而不仅仅是按钮.如果这不是你想要的,你可能想要像这样包装按钮:

<span isolate-click>
    <button class="btn" ng-click="deleteUser(user.id, $index);">
        Delete
    </button>
</span>


这是指令的代码:

angular.module('awesome', []).directive('isolateClick', function() {
    return {
        link: function(scope, elem) {
            elem.on('click', function(e){
                e.stopPropagation();
            });
        }
   };
});

        
                
                    2023-02-13 17:34  回答
                       mobiledu2502872577
                
            
                    

    

    
    
        撰写答案
        
            
                
                    回答问题...



    
    
        今天，你开发时遇到什么问题呢？
        立即提问
    

    
        热门标签