经常遇到场景:多层级元素绑定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
}

angular 点击事件阻止冒泡及默认行为的更多相关文章

  1. html如何点击子元素事件而不触发父元素的点击事件——阻止冒泡

    如果子元素和父元素都有点击事件,会出现点击事件冒泡的情况. 1.如何避免冒泡: html: <html> <head></head> <body> &l ...

  2. vue 点击事件阻止冒泡 用stop

    1.使用vue阻止子级元素的click事件冒泡,很简单,用stop.eg: @click.stop='xxx'

  3. js阻止点击事件的冒泡的实现

    <html> <head> <script type="text/javascript"> function fnclick1(){ alert ...

  4. js阻止冒泡和默认事件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 重新认识vue之事件阻止冒泡

    冒泡的表现 近期用vue做了一个需求,大概是同一个区域,点击不同位置有不同的响应函数,还有个总的响应函数,好吧,如下图所示: 他们的DOM结构如下: <div v-for="(item ...

  6. 前端(十五)—— JavaScript事件:绑定事件方式、事件的冒泡和默认事件、鼠标事件、键盘事件、表单 事件、文档事件、图片事件、页面事件

    JS事件:绑定事件方式.事件的冒泡和默认事件.鼠标事件.键盘事件.表单 事件.文档事件.图片事件.页面事件 一.事件的两种绑定方式 1.on事件绑定方式 document.onclick = func ...

  7. Angular ngClick 阻止冒泡和默认行为

    这其实是一个很简单的问题,如果你认真查看过Angular官方的API文档,本来不想记录的.但是这个问题不止一次的被人问起,所以今天在记录在这里. 在Angular中已经对一些ng事件如ngClick, ...

  8. jQuery 阻止冒泡和默认事件

    jQuery event.preventDefault() 方法 event.preventDefault() 方法阻止元素发生默认的行为. 例如: 当点击提交按钮时阻止对表单的提交 阻止以下 URL ...

  9. js阻止冒泡和默认事件(默认行为)详解- jquery DefaultPrevented 函数

    <!DOCTYPE html> <html>     <head>     <meta charset="UTF-8">     & ...

随机推荐

  1. linux命令格式及who、whoami、su和passwd命令

    linux命令格式及who.whoami.su和passwd命令 1. Linux命令的格式 Linux命令的语法格式: 命令 [选项] [参数] 命令格式中命令.选项.参数的具体含义: 命令:告诉L ...

  2. 模板内置函数(HTML)

    模板内置函数 注意:1.html书写避免多余的空格,否则可能无法被识别 2.模板是用来渲染的不要用来处理逻辑 后台ctime=datetime.datatime.now() {{ctime|date: ...

  3. iOS支付宝2.0 SDK集成整理

    https://cshall.alipay.com/enterprise/help_detail.htm?help_id=473890 http://wenku.baidu.com/link?url= ...

  4. 支付宝sdk iOS 集成

    1添加支付宝源文件和库文件AlipayOrder.h    AlipayOrder.m    AlipayResult.h    AlipayResult.m  AlixLibService.h   ...

  5. celery 动态定时任务探索

    环境: celery 4.3 flask python 3.7 linux 需求: 动态添加定时任务,且方便维护. 解决思路: 参考django-celery 或是celery源码,将定时任务配置放置 ...

  6. s3c6410时钟初始化

        今天自己写bootloader做时钟初始化时遇到的问题,特记录下来.为了方便理解,我大部分都有截图, 在此我先说明下,图均来自数据手冊.也希望看了本篇文章的同志多多參看数据手冊才干理解的更加透 ...

  7. jsp项目中整个项目没有问题但是servlet报错

    项目没问题但是serverlet报错 项目右键 buildPath-->configure build path -->Myeclipse Library-->J2EE 1.3 Li ...

  8. xcode禁用代码分析的警告和内存泄漏

    在使用xcode进行iphone应用开发时,经常需要添加一些第三方的类库,而一些第三方的类库由于缺少维护,从而导致类库中含有各种警告和各种内存泄漏,但并不影响运行. 倘若我们需要用到第三方库,而由不想 ...

  9. WPF动画应用-几何图形扩散动画

    原文:WPF动画应用-几何图形扩散动画 最终效果图: 本实例中用到了DoubleAnimation和Storyboard两个类. 如果想系统学习的话可以直接点击链接看官方文档. 源码: 首先,在页面上 ...

  10. es6新增语法之`${}`

    这是es6中新增的字符串方法 可以配合反单引号完成拼接字符串的功能 1.反单引号怎么打出来?将输入法调整为英文输入法,单击键盘上数字键1左边的按键. 2.用法step1: 定义需要拼接进去的字符串变量 ...