时间戳

首页 > 解决方案 > 角度检测鼠标左键单击和鼠标右键单击

angular - 角度检测鼠标左键单击和鼠标右键单击

问题描述

我是 Angular 的新手，我一直在尝试使用它重新创建 Minesweeper。我在检测左键单击以显示磁贴和右键单击以标记磁贴方面取得了成功，但我不确定如何检测同时按下鼠标左键和右键以显示更大区域。有没有办法检测到呢？

标签： angular

解决方案

进口HostListener

import { HostListener } from "@angular/core";

在右键单击事件上，使用contextmenu事件。

@HostListener("contextmenu", ["$event"])
   onRightClick(event) {
      //your code here
   }

在左键单击事件上，使用click事件。

@HostListener("click", ["$event"])
  onClick() {
    //code here
  }

对于两次点击，添加timeout到每个右键和左键点击事件，因为大多数情况下两个点击不能同时触发，一次点击将始终领先于另一次点击，如果有继续点击则执行。在我的工作代码中，右键单击仍然会在两次单击时触发。我不知道这是否是因为，preventdefault但是如果同时执行了两次单击，您可以添加另一个条件，那么您已经可以执行右键单击了。

在此处查看工作代码：https ://stackblitz.com/edit/angular-ivy-yzh4wh

right_clickOnly: boolean = true;
left_clickOnly: boolean = true; 

@HostListener("contextmenu", ["$event"])
  onRightClick(event) {
    event.preventDefault();
    this.right_clickOnly = false;
    if (!this.left_clickOnly) {
      this.performBothClick();
      event.stopPropagation();
    } else {
      setTimeout(() => {
        this.right_clickOnly = true;
        this.right_click += 1;
      }, 300);
      // this.right_clickOnly = false;

    }
  }

  @HostListener("click", ["$event"])
  onClick() {
    this.left_clickOnly = false;

    if (!this.right_clickOnly) {
      this.performBothClick();
    } else {
      setTimeout(() => {
        this.left_clickOnly = true;
        this.left_click += 1;
      }, 300);
      // this.left_clickOnly = false;

    }
  }

  performBothClick() {
    this.both_click +=1;
    this.right_clickOnly = true;
    this.left_clickOnly = true;
  
  }

推荐阅读