//指令定义

@Directive({

  selector: `click-stop-propagation`

  events: 'stopClick($event)'

})

class ClickStopPropagation {

  stopClick(event:Event) {

    event.preventDefault();

    event. stopPropagation();

  }

}
//使用

<button (click)="doSomething()" click-stop-propagation>

参考:

https://github.com/angular/angular/issues/2042

Angular 一个简单的指令实现 阻止事件扩散的更多相关文章

  1. angular学习笔记(三十)-指令(9)-一个简单的指令示例

    学了前面这么多关于指令的知识,现在就用指令来写一个小组件:expander 这个组件的功能就是点击开展菜单,再点击收起菜单: ↑↓点击展开收起 下面来看它的代码: html: <!DOCTYPE ...

  2. jQuery阻止事件冒泡的例子

    下面给给各位朋友稍加整理了一jquery中阻止事件冒泡的一些例子,我们知道JQuery 提供了两种方式来阻止事件冒泡,但我们简单的利用它来做一些应用可能不深入或不理解,下面整理了更详细的方法,有兴趣的 ...

  3. 使用lua实现一个简单的事件派发器

    设计一个简单的事件派发器,个人觉得最重要的一点就是如何保证事件派发过程中,添加或删除同类事件,不影响事件迭代顺序和结果,只要解决这一点,其它都好办. 为了使用pairs遍历函数,重写了pairs(lu ...

  4. Qt使用一个事件队列对所有发出的事件进行维护（QObject的event()函数相当于dispatch函数），用EventLabel 继承QLabel作为例子（简单明了） good

    事件(event)是由系统或者 Qt 本身在不同的时刻发出的.当用户按下鼠标.敲下键盘,或者是窗口需要重新绘制的时候,都会发出一个相应的事件.一些事件在对用户操作做出响应时发出,如键盘事件等:另一些事 ...

  5. javascript的事件冒泡,阻止事件冒泡和事件委托， 事件委托是事件冒泡的一个应用。

    首先,弄明白js 当中,什么是事件,事件模型在js中是如何设计的.什么是事件冒泡? 什么是“事件冒泡”呢?假设这里有一杯水,水被用某种神奇的方式分成不同颜色的几层.这时,从最底层冒出了一个气泡,气泡会 ...

  6. angularjs中阻止事件冒泡，以及指令的注意点

    appModule.directive('newStr',function(){ return{ restrict:'AE', //阻止事件冒泡需要加$event参数 template:`<di ...

  7. 并发编程概述 委托（delegate） 事件（event） .net core 2.0 event bus 一个简单的基于内存事件总线实现 .net core 基于NPOI 的excel导出类，支持自定义导出哪些字段 基于Ace Admin 的菜单栏实现 第五节：SignalR大杂烩(与MVC融合、全局的几个配置、跨域的应用、C/S程序充当Client和Server)

    并发编程概述   前言 说实话,在我软件开发的头两年几乎不考虑并发编程,请求与响应把业务逻辑尽快完成一个星期的任务能两天完成绝不拖三天(剩下时间各种浪),根本不会考虑性能问题(能接受范围内).但随着工 ...

  8. 构建一个简单的Angular工程

    1.创建一个空的工程,之后用webstorm打开,添加一个bower.json文件: { "name": "AngularTpl", "depende ...

  9. Java实现一个简单的事件监听器

    关于事件监听我们需要知道的一些基础知识. a)事件三要素(who when what): source -- 事件源 when -- 事件发生时间 message -- 事件主题消息,即希望通过事件传 ...

随机推荐

  1. python3.0笔记

    python文件头 #!/usr/bin/env python # -*- coding: utf- -*- ''' Created on 2017年5月9日 @author: Administrat ...

  2. MongoDB 基本命令备忘

    使用admin数据库: use admin 显示数据库: show dbs 创建用户,并制定该用户的角色: db.createUser({user: "root",pwd:&quo ...

  3. 转战 rocketmq

    接触 kafka 有一段时间了,一个人的力量实在有限,国内 rocketmq 的生态确实更好,决定换方向. rocketmq 文档地址:http://rocketmq.cloud/zh-cn/docs ...

  4. django-xadmin常用内容记录

    自定义菜单名称: 1 修改app下的 apps.py文件 添加 class OperationConfig(AppConfig): name = 'operation' verbose_name = ...

  5. SSM001/构建maven多模块项目

    一.Idea构建maven多模块项目 1.创建maven项目--创建父模块 [1].File->New->Module... [2].点击next,填写:GroupId,ArtifactI ...

  6. python+selenium的WebElement对象操作

    webelement对象操作 webelement对象是selenium中所有元素的父类,也就是webelement对象拥有的方法,其它元素对象都会有: 只是不同的对象在调用特定方法时,效果是不一样的 ...

  7. linux--初识别

    镜像网站 下载系统镜像 http://mirrors.163.com/ http://mirrors.sohu.com https://www.netcraft.com/ 命令大全 https://m ...

  8. oracle--表分区、分区索引

    --|/ range分区 create table sale( product_id varchar2(5), sale_count number(10,2) ) partition by range ...

  9. java二周的学习总结

    一转眼二周就过去了,个人觉得虽然java和C语言有差异,但差别并不大,因为语法语句方面都是差不多的,因为我上个学期并没有很认真的学好C语言,所以我这个学期更希望学好java,java方面还是挺有趣的, ...

  10. 在VS Code中使用Jupyter Notebook

    一.安装配置 1.在扩展商店中安装官方的Python扩展包 2.系统已经安装了Jupyter Notebook 由于系统上的Python环境是用Anaconda安装的,已经有Jupyter Noteb ...