Angular 中自定义 Debounce Click 指令防止重复点击 Angular 中的点击事件处理是一个常见的问题，特别是在复杂的交互应用程序中。如何防止重复点击事件变得非常重要。本文将介绍如何使用 Angular Directive API 创建自定义 Debounce Click 指令，以防止重复点击事件。 Debounce Click 指令的实现 Debounce Click 指令的实现主要涉及到三个部分：Directive API、HostListener API 和 RxJS 中的 debounceTime 操作符。 我们需要创建 DebounceClickDirective 指令并将其注册到我们的 app.module.ts 文件中。 DebounceClickDirective 指令将处理在指定时间内多次点击事件，这有助于防止重复的操作。 ```typescript import { Directive, OnInit } from '@angular/core'; @Directive({ selector: '[appDebounceClick]' }) export class DebounceClickDirective implements OnInit { constructor() { } ngOnInit() { } } ``` 在上面的代码中，我们使用了 @Directive 装饰器来定义 DebounceClickDirective 指令。selector 属性指定了该指令的选择器为 appDebounceClick。 DebounceClick 指令的应用 我们可以使用以下方式应用上面的自定义指令： ```html Click>Debounced Click ``` 在上面的 HTML 代码中，我们将 DebounceClick 指令应用于按钮元素。 监听宿主元素的点击事件 接下来，我们需要监听宿主元素的点击事件，因此我们可以将以下代码添加到我们的自定义指令中： ```typescript import { Directive, HostListener, OnInit } from '@angular/core'; @Directive({ selector: '[appDebounceClick]' }) export class DebounceClickDirective implements OnInit { constructor() { } ngOnInit() { } @HostListener('click', ['$event']) clickEvent(event: MouseEvent) { event.preventDefault(); event.stopPropagation(); console.log('Click from Host Element!'); } } ``` 在上面的代码中，我们使用了 @HostListener 装饰器来监听宿主元素上的点击事件。我们可以使用 event.preventDefault() 和 event.stopPropagation() 方法来阻止浏览器的默认行为和事件冒泡。 实现事件的去抖动处理 现在我们可以拦截宿主元素的点击事件，此时我们还需要有一种方法实现事件的去抖动处理，然后将它重新发送回父节点。这时我们需要借助事件发射器和 RxJS 中的 debounce 操作符。 ```typescript import { Directive, EventEmitter, HostListener, OnInit, Output } from '@angular/core'; import { Subject } from 'rxjs/Subject'; import 'rxjs/add/operator/debounceTime'; @Directive({ selector: '[appDebounceClick]' }) export class DebounceClickDirective implements OnInit { @Output() debounceClick = new EventEmitter(); private clicks = new Subject(); constructor() { } ngOnInit() { this.clicks .debounceTime(500) .subscribe(e => { this.debounceClick.emit(e); }); } @HostListener('click', ['$event']) clickEvent(event: MouseEvent) { event.preventDefault(); event.stopPropagation(); this.clicks.next(event); } } ``` 在上面的代码中，我们使用了 RxJS 中的 debounceTime 操作符来实现事件的去抖动处理。我们还使用了事件发射器来将去抖动后的事件发送回父节点。 结论 本文介绍了如何使用 Angular Directive API 创建自定义 Debounce Click 指令，以防止重复点击事件。我们使用了 HostListener API 来监听宿主元素的点击事件，并使用 RxJS 中的 debounceTime 操作符来实现事件的去抖动处理。这有助于防止重复的操作，提高应用程序的用户体验。

Link Click Counter1.0.,WordPress原创插件：超链接点击访问统计

Chrome For Windows 64 离线安装包 包含如下插件，拖动即可安装 AdBlock、AdBlock plus、click&clean;

BetterJoyForCemu(1-click)v6.zip

click on the button below and install

1、左右两个camera，分别渲染，实现分屏； 2、Canvas 设置为 worldSpace，然后交互camera 设置为 RightCamera（当然根据需要切换也可以）； 3、GazeEyeRaycaster 实现 Gaze 交互，且不干扰点击 UI 事件；

右键菜单管理工具 Right Click Enhancer Professional v4.5.5 中文破解版，清理多余右键选项，加快系统运行速度，文档里面有注册码

EndNote Click（Chrome浏览器用）插件，便于在web of science中下载pdf文献

iPod Click Wheel Games商店以前是存在与iTunes Store里面的，后来砍掉了。苹果没有开放sdk，所以没啥第三方游戏。支持的设备有iPod nano (3rd 4th 5th generation)，iPod Classic,iPod (5th generation)。

Arcgis api for javascript(4.5版本) - 点击多边形(Polygon)并高亮显示