Angular (mouseenter), (mouseleave) 根据屏幕大小禁用

Question

我正在使用 angular mouseenter() 和 mouseleave() 添加 class 以在悬停时使块宽度从 50px 到 300px。但是，在移动设备中没有悬停这样的东西。我可以根据屏幕大小禁用它吗？或者它在移动设备上不起作用？

注意：我知道我可以根据屏幕大小更改 class 的样式。看看有没有别的办法。

Answer 1

您可以利用 touch events 来确定它是否是基于触摸的设备。它仍然是一种解决方法，因为我们实际上并没有检查屏幕尺寸，而是假设如果触摸事件被触发，那么它一定是一个占用空间小的设备。

控制器

export class AppComponent implements OnInit {
  private isTouchEvent: boolean;    // set to true if the button press is registered as touch event

  public touchDown(event: any) {
    this.isTouchEvent = true;
    // handle event without applying class
  }

  public touchUp(event: any) {
    this.isTouchEvent = true;
    // handle event without applying class
  }

  public touchLeave(event: any) {
    this.isTouchEvent = true;
    // handle event without applying class
  }

  public mouseDown(event: any) {
    if (!this.isTouchEvent) {
      // apply class and handle event
    }
  }

  public mouseUp(event: any) {
    if (!this.isTouchEvent) {
      // apply class and handle event
    }
  }

  public mouseLeave(event: any) {
    if (!this.isTouchEvent) {
      // apply class and handle event
    }
  }

  public mouseEnter(event: any) {
    if (!this.isTouchEvent) {
      // apply class and handle event
    }
  }
}

模板

<div
  (touchstart)="touchDown($event)"
  (touchend)="touchUp($event)"
  (touchmove)="touchLeave($event)"
  (mousedown)="mouseDown($event)"
  (mouseup)="mouseUp($event)"
  (mouseenter)="mouseEnter($event)"
  (mouseleave)="mouseLeave($event)"
>
</div>

Answer 2

要“停用”事件实际上有 2 种可能性。

1.) 检查调用事件的时间，当前 window 大小是多少，如果大小不合适则终止该方法。（不是很好） 2.) 调整大小时检查 window 大小并检查当前事件是否已注册。然后您可以注册或取消注册该事件 - 取决于您想要做什么。（因此需要JavaScript）

Angular (mouseenter), (mouseleave) 根据屏幕大小禁用

Angular (mouseenter), (mouseleave) disable based on screensize

angular

angular9