angularjs ng-click 阻止事件冒泡

来源:互联网 发布:怎么克隆网站软件 编辑:程序博客网 时间:2024/06/05 22:46

废话不多说具体场景如下:
这里写图片描述
点击深色方形区域选中改条数据,点击详情按钮显示该数据对应的单据详情,但是问题出在点击详情的时候不仅展示了单据详情,同时执行了选中当前数据的操作(点击事件冒泡到了父元素上),所以解决该问题在于要阻止事件冒泡。
于是去查看关于ng-click的文档,官方文档这样描述:
这里写图片描述
可见事件对象是$event
所以我们可以在事件触发的时候传入$event 然后做阻止事件冒泡的操作,具体代码如下:
html:

 <button class="btn btn-primary" ng-click="toogleShowDtl(o,$event)">详情</button>

js:

 $scope.toogleShowDtl = function (item, e) {             //阻止事件冒泡             e.stopPropagation();             //此处写其他操作       }

ok,此时就能完美的实现点击详情不触发选中事件了。

原创粉丝点击