角度(鼠标输入)，(鼠标离开)根据屏幕尺寸禁用

Question

我正在使用角度mouseenter((和mouseleave((来添加一个类，用于在悬停时使块宽度从50px到300px。但是，在移动设备中，没有悬停这样的东西。我可以根据屏幕尺寸禁用此功能，或者它在移动设备上不起作用吗？

注意：我知道我可以根据屏幕尺寸更改类的样式。只是检查是否有任何其他方法。

Answer 1

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

控制器

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

要"停用"事件，实际上有两种可能性。

1.( 检查何时调用事件，当前窗口大小是多少，如果大小不合适，则终止方法。(不太好( 2.( 调整大小时，请检查窗口大小，并检查当前事件是否已注册。然后你可以注册，取消注册事件 - 取决于你想要做什么。