ngx自定义一个判断是否点击本节点的指令

前端之家收集整理的这篇文章主要介绍了ngx自定义一个判断是否点击本节点的指令前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

写组件的时候经常要判断鼠标点击是否是本节点 所以 抽出来

废话少说直接上代码

  1. import { Directive,ElementRef,EventEmitter,OnDestroy,OnInit,Output } from '@angular/core';
  2. /** * 是否点击的是本节点 * 如果点击的不是本节点或者按Esc 发射一个事件 * @export * @class ClickOutsideDirective * @implements {OnInit} * @implements {OnDestroy} */
  3. @Directive({
  4. selector: '[clickOutside]',})
  5. export class ClickOutsideDirective implements OnInit,OnDestroy {
  6. constructor(private element: ElementRef) {
  7. }
  8.  
  9. // Output 装饰器支持一个可选的参数,用来指定组件绑定属性名称。如果没有指定,则默认使用 @Output 装饰器,装饰的属性名。具体示例如下:
  10.  
  11. @Output('clickOutside') onClickOutside: EventEmitter<void> = new EventEmitter<void>();
  12. escKeyListener = (event: KeyboardEvent) => {
  13. // Esc的keyCode为27
  14. if (event.keyCode === 27) {
  15. this.onClickOutside.emit();
  16. }
  17. }
  18.  
  19. clickListener = (event: Event) => {
  20. /** * 兼容IE的写法 * IE下,event对象有srcElement属性,但是没有target属性; * Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的 */
  21. if (!isSelfOrAncestorNode(this.element.nativeElement,event.target as Node || event.srcElement)) {
  22. this.onClickOutside.emit();
  23. }
  24. }
  25.  
  26. ngOnInit(): void {
  27. // 初始化监控鼠标弹起和键盘弹起
  28. document.addEventListener('mouseup',this.clickListener);
  29. document.addEventListener('keyup',this.escKeyListener);
  30. }
  31.  
  32. ngOnDestroy(): void {
  33. // 指令销毁时销毁监控 释放内存
  34. document.removeEventListener('mouseup',this.clickListener);
  35. document.removeEventListener('keyup',this.escKeyListener);
  36. }
  37. }
  38. // 是否是自己或者父级的DOM节点
  39. function isSelfOrAncestorNode(ancestor: Node,node: Node): boolean {
  40. while (node) {
  41. if (node === ancestor) {
  42. return true;
  43. }
  44. node = node.parentNode;
  45. }
  46. return false;
  47. }

用的时候直接在组件最外层

  1. <div (clickOutside)="关闭函数()">

猜你在找的Angularjs相关文章