angular 点击事件阻止冒泡及默认行为

经常遇到场景：多层级元素绑定ng-click 事件，则底层元素的点击事件存在冒泡现象，怎么解决？
类似原生JS ,只是语法稍有不同，如下：

阻止冒泡 $event.stopPropagation()

阻止默认行为 $event.preventDefault()

代码实例--tab切换

 // html 行内阻止
<div ng-click="parentTab(1,$event)">父盒子点击<div class="sw_active" ng-click="ratioTab(1,$event);$event.stopPropagation();">tab1</div><div ng-click="ratioTab(2,$event);$event.stopPropagation();">tab2</div><div ng-click="ratioTab(3,$event);$event.stopPropagation();">tab3</div></div></div>
// Js 方法内阻止
$scope.ratioTab(num,$event){$event.stopPropagation();//阻止冒泡$event.preventDefault();// 阻止默认行为
//your coding
}

转载于:https://www.cnblogs.com/yaohe/p/11132286.html

angular 点击事件阻止冒泡及默认行为相关推荐

vue--点击事件阻止冒泡的方法
vue-click点击事件的冒泡行为 **1. click.stop就是外层包内层,内层写了.stop不会触发到外层的,只触发内层 .prevent就是阻止默认跳转链接,比如写了一个百度链接,没有 p ...
html 点击子元素,html如何点击子元素事件而不触发父元素的点击事件——阻止冒泡...
如果子元素和父元素都有点击事件,会出现点击事件冒泡的情况. 1.如何避免冒泡: html: 你好, 战无不胜 [注销] js: 方法1: UserLogout.οnclick=function (e) ...
html 点击事件阻止冒泡,js阻止事件冒泡的两种方法
本篇文章给大家分享的内容是关于js阻止事件冒泡的两种方法 ,有需要的朋友可以参考一下一.冒泡事件简介当我们点击一个控件的时候,如果包括这个控件的父控件也有click事件,则会继续执行. 方法一:e ...
如何阻止冒泡浏览器默认行为
如何阻止冒泡&&浏览器默认行为 2018-12-27 10:20 by JerremyZhang, ... 阅读, ... 评论, 收藏, 编辑摘要很多同学对阻止事件冒泡和阻止事件 ...
React合成事件(阻止冒泡stopImmediatePropagation)
文章目录一.遇到的问题问题描述分析二.React 合成事件 1.执行顺序 2.合成事件阻止冒泡 2.1e.stopPropagation 2.2 e.nativeEvent.stopImmed ...
重新认识vue之事件阻止冒泡
冒泡的表现近期用vue做了一个需求,大概是同一个区域,点击不同位置有不同的响应函数,还有个总的响应函数,好吧,如下图所示: 他们的DOM结构如下: <div v-for="(item ...
angular ngClick 阻止冒泡和默认行为
这其实是一个很简单的问题,如果你认真查看过Angular官方的API文档,本来不想记录的.但是这个问题不止一次的被人问起,所以今天在记录在这里. 在Angular中已经对一些ng事件如ngClick, ...
jQuery 阻止冒泡和默认事件
jQuery event.preventDefault() 方法 event.preventDefault() 方法阻止元素发生默认的行为. 例如: 当点击提交按钮时阻止对表单的提交阻止以下 URL ...
echarts中重写图例点击事件,阻止默认事件
1.取消全部图例点击事件 *只需添加一个属性即可 legend: {selectedMode:false } 2.重写图例点击事件,示例为点哪个图例显示哪条折线 *获取点击图例对应图例数组中的ind ...

angular 点击事件阻止冒泡及默认行为

阻止冒泡 $event.stopPropagation()

阻止默认行为 $event.preventDefault()

代码实例--tab切换

angular 点击事件阻止冒泡及默认行为相关推荐

最新文章

热门文章