角 7 | HostListener 模糊条件停止所有其他事件回调

Question

我有一个要求，我们希望用户解决输入字段错误，并且在完成之前不允许用户在屏幕上进行任何其他操作。

同样，我在输入字段和 onBlur 上实现了 HostListener，如果验证方案失败，我会将焦点设置回输入字段。

并且，我正在执行 e.preventDefault() 和 e.stopPropagtion() 来停止要在页面上执行的所有其他事件回调（在设置focus后，blur将是要执行的第一个事件）。

但不知何故，在任何外部事件上，blur确实会被执行，但不限制其他事件的执行。那些也正在执行，否则我将无法实现所需的功能。

import { Directive, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[appNumberFormat]'
})
export class NumberFormatDirective {

  constructor() { }

  @HostListener('blur', ['$event']) blur(evt) {
    evt.preventDefault();
    console.log('field focus...');
    evt.target.focus();
    return false;
    // if (evt.target.value.trim() === '') {
    //     this.formControl.control.setValue(this.defaultValue);
    // }
  }
}

我在 stackBlitz 中复制了相同的场景。请看一看。

https://stackblitz.com/edit/angular-54ermg

Answer 1

您可以做的一种方法是使用此解决方案禁用页面上的所有事件（并为不允许输入键的按键进行自定义）。

停止传播所有事件

  disableAllUserEvents = () => {
    const events = ["click", "contextmenu", "dblclick", "mousedown", "mouseenter", "mouseleave", "mousemove",
        "mouseover", "mouseout", "mouseup", "blur", "change", "focus", "focusin",
        "focusout", "input", "invalid", "reset", "search", "select", "submit", "drag", "dragend", "dragenter",
        "dragleave", "dragover", "dragstart", "drop", "copy", "cut", "paste", "mousewheel", "wheel", "touchcancel",
        "touchend", "touchmove", "touchstart"];

    const handler = event => {
      event.stopPropagation();
      event.preventDefault();

      return false;
  };

    for (let i = 0, l = events.length; i < l; i++) {
        document.addEventListener(events[i], handler, true);
    }

    return () => {
        for (let i = 0, l = events.length; i < l; i++) {
            document.removeEventListener(events[i], handler, true);
        }
    };
  };

并在一切正常后重新启用该事件。这有点暴力，但确实有效。

https://stackblitz.com/edit/angular-68vdrq