经常遇到场景:多层级元素绑定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. Python数据分析与展示[第三周](pandas简介与数据创建)

    第三周的课程pandas 分析数据 http://pandas.pydata.org import pandas as pd 常与numpy matplotlib 一块定义 d=pd.Series(r ...

  2. 50倍时空算力提升,阿里云RDS PostgreSQL GPU版本上线

    2019年3月19日,阿里云RDS PostgreSQL数据库GPU规格版本正式上线,开启了RDS异构计算并行加速之路.该版本在RDS(关系型数据库服务)的云基础设施层面首次完成了与阿里云异构计算产品 ...

  3. MAC使用技巧之苹果电脑抓图截屏方法

    用苹果电脑自带的截图功能的快捷键:command+shift+3 三个键按下则抓取/截取全屏 command+shift+4 然后用鼠标框选则抓取该区域的截图 command+shift+4 然后按空 ...

  4. 大话鸿蒙操作系统(一)-- 先聊聊 Fuchsia OS

    大话鸿蒙操作系统(一) 第一篇先不聊鸿蒙操作系统,聊聊 Google 的新系统 Fuchsia OS. 先看看 Fuchsia OS 介绍. 为什么 Google 要造新的 Fuchsia OS 操作 ...

  5. Extended Traffic

    题目链接 题意:有n个路口,m条通路,如果经过一条路则会得到(终点 - 起点)^3的权值,求从1点到其他点的最小权值,如果权值小于3或无法到达输出'?'. 题解:因为权值可能为负,所以用SPFA来解题 ...

  6. UVA_401:Palindromes

    AC:Time(29ms)     C++ 4.8.2 #include<stdio.h> #include<string.h> char * mirstr = "A ...

  7. vim删除行

    0,vim filename 1,显示行号 :set number 2,跳转到第1000行 1000G (跳转到文件末尾:“G”) 3,删除1-1000行 :1,.d 4,删除所有行 先跳转到文件最后 ...

  8. 配置上这个模板Bug少90%

    本来写程序经常会碰到各种难缠的Bug,自从修改了注释模板,bug明显少了,看效果图: 好吧,我逗比了 下面是文字版: /** _oo0oo_ o8888888o 88" . "88 ...

  9. 关于使用JavaMail发送邮件抛出java.lang.NoSuchMethodError: com.sun.mail.util.TraceInputStream.<init>(Ljava异常的解决方法

    我们在使用JavaMail时有可能会如下异常: Exception in thread "main" java.lang.NoSuchMethodError: com.sun.ma ...

  10. 10Redis键空间通知(keyspace notifications)

    Redis的键空间通知(keyspace notifications)功能是自2.8.0版本开始加入的,客户端可以通过订阅/发布(Pub/Sub)机制,接收那些以某种方式改变了Redis数据空间的事件 ...