经常遇到场景:多层级元素绑定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. [Vue CLI 3] 插件开发之 registerCommand 到底做了什么

    首先,我们看到在 package.json 中有 scripts 的定义: "scripts": { "serve": "vue-cli-servic ...

  2. jsp之jstl(展示所有商品、重写登录案例)

    jsp之jstl jstl: jsp标准的标签库语言,apache的,是用来替代java脚本 使用步骤: 1.导入jar包 (jstl.jar和standard.jar) 2.在页面上导入标签库 &l ...

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

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

  4. Nginx教程(三) Nginx日志管理 (转)

    Nginx教程(三) Nginx日志管理 1 日志管理 1.1 Nginx日志描述 通过访问日志,你可以得到用户地域来源.跳转来源.使用终端.某个URL访问量等相关信息:通过错误日志,你可以得到系统某 ...

  5. mongoDB端口启动失败原因

    删除以下文件: (所以数据会丢失,需要重新创建数据库)

  6. mysql锁机制之行锁(四)

    前言 顾名思义,行锁就是一锁锁一行或者多行记录,mysql的行锁是基于索引加载的,所以行锁是要加在索引响应的行上,即命中索引,如下图所示: InnoDB 支持多粒度锁(multiple granula ...

  7. Seata 0.7.0 正式发布

    Seata 是 阿里巴巴 开源的 分布式事务中间件,以 高效 并且对业务 0 侵入 的方式,解决 微服务 场景下面临的分布式事务问题.Seata 0.7.0 已正式发布,本次共合并59pr,主要包括: ...

  8. Data Lake Analytics中OSS LOCATION的使用说明

    前言 Data Lake Analytic(后文简称 DLA)可以帮助用户通过标准的SQL语句直接对存储在OSS.TableStore上的数据进行查询分析. 在查询前,用户需要根据数据文件的格式和内容 ...

  9. js cookies 的写入、读取、删除

    //写cookies //escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串.function setCookie(name,value) {     var Days ...

  10. Vim学习与总结

    1. :w 后面可以加文件名 2. 使用hjkl 来移动光标,当然你也可以使用箭头.j就是向下的箭头,k是向上,h向左, l向右 3.  :help <command> → 显示相关命令的 ...