Angularjs中table中实现点击td中按钮不触发tr的点击事件

    xiaoxiao2021-03-25  140

    今天遇到个问题:

    1、在table中,每一行有个checkbox,tr上设置了ng-click;

    2、每一行最后又有一个按钮【详情】,按钮使用ui-sref设置了点击事件;

    3、现在出现的问题是:点击【详情】按钮,同样会触发ng-click事件,即将复选框checkbox勾选上

     

    经过网上查询和尝试,最后解决方案为:

    1、将按钮的ui-sref换成ng-click;

    2、在ng-click的方法中实现state的跳转,方法的传入参数增加$event;

    3、使用angularjs的阻止冒泡方法$event.stopPropagation(),使点击事件不再派送。

     

    在网上具体了解了下stopPropagation()方法,它的具体作用为:终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点

    具体click方法如下:

    function viewDetail(date,$event) { $state.go("state.view",{ param1:date.param1, param2:date.param1 }); $event.stopPropagation();//阻止冒泡 } button的设置: <button ng-click="vm.viewDetail({param1:obj.param1,param1:obj.param2},$event)" type="submit" class="btn btn-primary btn-sm"> <span class="glyphicon glyphicon-eye-open"></span> <span class="hidden-xs hidden-sm" data-translate="entity.action.view"></span> </button>

     

     

    转载请注明原文地址: https://ju.6miu.com/read-4304.html

    最新回复(0)