经常遇到场景:多层级元素绑定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. php各种字符串截取

    各种字符串截取.php <?php /** * 字符串截取,支持中文和其他编码 * @param [string] $str [字符串] * @param integer $start [起始位 ...

  2. 2018-8-10-C#-快速释放内存的大数组

    title author date CreateTime categories C# 快速释放内存的大数组 lindexi 2018-08-10 19:16:52 +0800 2018-2-13 17 ...

  3. img标签src不给路径就会出现边框

    <img/>在src加载失败或没有给的,浏览器会自动给img加上边框. 如下图这样: 产品觉得影响美观,一定要pass掉. 原码是这样: .ctn{ position: relative; ...

  4. 【JZOJ4762】【NOIP2016提高A组模拟9.7】千帆渡

    题目描述 输入 输出 样例输入 5 1 4 2 5 1 4 1 1 2 4 样例输出 2 1 4 数据范围 解法 设f[i][j]表示前 i个蓝色帆船中,选择了第 j个红色帆船作为结尾的最大答案. 那 ...

  5. jenkins执行selenium自动化测试浏览器不显示解决方法

    因为jenkins是用windows installer 安装成 windows的服务了,那么jenkins是一个后台服务,所以跑selium cases 的时候不显示浏览器 解决办法:Step 1. ...

  6. day39-Spring 06-Spring的AOP:带有切点的切面

    环绕增强功能是最强的,它相当于前置增强和后置增强. 这就是带有切点的切面 package cn.itcast.spring3.demo4; import org.aopalliance.interce ...

  7. Qt qmake报错(TypeError: Property 'asciify' of object Core::Internal::UtilsJsExtension)

    问题如题. 解决方案: 第一种 用下管理员权限来打开qt creator,再创建工程.有可能是没权限创建出源码工程目录 第二种 打开qt左边的项目上,可以看到这个项目的编译路径,修改成绝对路径,或者设 ...

  8. Linux使用及命令

    #命令模式下输入:光标移动到第34行第15个字符 <Enter>15l(这是小写的L) ctrl+u删除光标前面的字符 ctrl+j删除光标后面的字符 在Linux下用VIM打开大小几个G ...

  9. SpringCloud Zuul 路由映射规则配置

    阅读目录 前言 快速入门 路由详解 Cookie与头信息 本地跳转 Hystrix和Ribbon支持 过滤器解释 动态加载 后记 回到目录 前言 本文起笔于2018-06-26周二,接了一个这周要完成 ...

  10. vue vscode属性标签不换行

    "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attri ...