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
}
angular 点击事件阻止冒泡及默认行为的更多相关文章
- html如何点击子元素事件而不触发父元素的点击事件——阻止冒泡
如果子元素和父元素都有点击事件,会出现点击事件冒泡的情况. 1.如何避免冒泡: html: <html> <head></head> <body> &l ...
- vue 点击事件阻止冒泡 用stop
1.使用vue阻止子级元素的click事件冒泡,很简单,用stop.eg: @click.stop='xxx'
- js阻止点击事件的冒泡的实现
<html> <head> <script type="text/javascript"> function fnclick1(){ alert ...
- js阻止冒泡和默认事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 重新认识vue之事件阻止冒泡
冒泡的表现 近期用vue做了一个需求,大概是同一个区域,点击不同位置有不同的响应函数,还有个总的响应函数,好吧,如下图所示: 他们的DOM结构如下: <div v-for="(item ...
- 前端(十五)—— JavaScript事件:绑定事件方式、事件的冒泡和默认事件、鼠标事件、键盘事件、表单 事件、文档事件、图片事件、页面事件
JS事件:绑定事件方式.事件的冒泡和默认事件.鼠标事件.键盘事件.表单 事件.文档事件.图片事件.页面事件 一.事件的两种绑定方式 1.on事件绑定方式 document.onclick = func ...
- Angular ngClick 阻止冒泡和默认行为
这其实是一个很简单的问题,如果你认真查看过Angular官方的API文档,本来不想记录的.但是这个问题不止一次的被人问起,所以今天在记录在这里. 在Angular中已经对一些ng事件如ngClick, ...
- jQuery 阻止冒泡和默认事件
jQuery event.preventDefault() 方法 event.preventDefault() 方法阻止元素发生默认的行为. 例如: 当点击提交按钮时阻止对表单的提交 阻止以下 URL ...
- js阻止冒泡和默认事件(默认行为)详解- jquery DefaultPrevented 函数
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
随机推荐
- linux命令格式及who、whoami、su和passwd命令
linux命令格式及who.whoami.su和passwd命令 1. Linux命令的格式 Linux命令的语法格式: 命令 [选项] [参数] 命令格式中命令.选项.参数的具体含义: 命令:告诉L ...
- 模板内置函数(HTML)
模板内置函数 注意:1.html书写避免多余的空格,否则可能无法被识别 2.模板是用来渲染的不要用来处理逻辑 后台ctime=datetime.datatime.now() {{ctime|date: ...
- iOS支付宝2.0 SDK集成整理
https://cshall.alipay.com/enterprise/help_detail.htm?help_id=473890 http://wenku.baidu.com/link?url= ...
- 支付宝sdk iOS 集成
1添加支付宝源文件和库文件AlipayOrder.h AlipayOrder.m AlipayResult.h AlipayResult.m AlixLibService.h ...
- celery 动态定时任务探索
环境: celery 4.3 flask python 3.7 linux 需求: 动态添加定时任务,且方便维护. 解决思路: 参考django-celery 或是celery源码,将定时任务配置放置 ...
- s3c6410时钟初始化
今天自己写bootloader做时钟初始化时遇到的问题,特记录下来.为了方便理解,我大部分都有截图, 在此我先说明下,图均来自数据手冊.也希望看了本篇文章的同志多多參看数据手冊才干理解的更加透 ...
- jsp项目中整个项目没有问题但是servlet报错
项目没问题但是serverlet报错 项目右键 buildPath-->configure build path -->Myeclipse Library-->J2EE 1.3 Li ...
- xcode禁用代码分析的警告和内存泄漏
在使用xcode进行iphone应用开发时,经常需要添加一些第三方的类库,而一些第三方的类库由于缺少维护,从而导致类库中含有各种警告和各种内存泄漏,但并不影响运行. 倘若我们需要用到第三方库,而由不想 ...
- WPF动画应用-几何图形扩散动画
原文:WPF动画应用-几何图形扩散动画 最终效果图: 本实例中用到了DoubleAnimation和Storyboard两个类. 如果想系统学习的话可以直接点击链接看官方文档. 源码: 首先,在页面上 ...
- es6新增语法之`${}`
这是es6中新增的字符串方法 可以配合反单引号完成拼接字符串的功能 1.反单引号怎么打出来?将输入法调整为英文输入法,单击键盘上数字键1左边的按键. 2.用法step1: 定义需要拼接进去的字符串变量 ...