【问题标题】：Angular 2: check if shift key is down when an element is clickedAngular 2：单击元素时检查shift键是否按下
【发布时间】：2020-10-22 07:34:29
【问题描述】：

在 Angular 2 应用程序中，我希望点击事件在 按住 shift 键时触发不同的事件。如何做到这一点？

html如下：

<div class="item" *ngFor="#obj of available" (click)="toggleSelected(obj)"></div>

我想做这样的事情：

  toggleSelected(obj) {
    if(shift is pressed) {
      do this
    } else {
      do that
    }
  }

那么我如何检测是否按下了 shift 键？谢谢！

【问题讨论】：

标签： angular

【解决方案1】：

在(click)绑定中，将$event对象传递给toggleSelected方法：

<div class="item" *ngFor="#obj of available" (click)="toggleSelected(obj, $event)"></div>

在toggleSelected方法中，检查事件的shiftKey属性是否为true：

toggleSelected(obj, event) {
  if (event.shiftKey) {
    // do this
  } else {
    // do that
  }
}

【讨论】：

我应该在哪里捕获$event？它说未定义。
@dragon_cat：确保将$event 作为(click) 绑定中的第二个参数传递，并将event 作为参数添加到toggleSelected。
很好的答案。只是为了完整性：我添加了一个答案，其中也提到了参数的类型。如果您使用代码完成（例如在 Visual Studio 代码中），这很有用。

【解决方案2】：

您的问题可能涉及表格记录的多选选项。

在这种情况下，您可以将选定的对象存储在一个集合中。

public selectedRowSet: Set<MyObject> = new Set();

每次选择记录时，您使用以下方法将它们添加到集合中。

public setSelectedRow(obj: MyObject, event: MouseEvent) {
  if(!event.shiftKey) {
    selectedRowSet.clear();
  }
  selectedRowSet.add(obj);
}

那么您可能想要添加条件格式。

public isRowSelected(obj: MyObject): boolean
{
  return selectedRowSet.has(obj);
}

在您看来使用：

<tr *ngFor="let obj of myObjectCollection" 
    [class.someCssClass]="isRowSelected(obj)" 
    (click)="setSelectedRow(obj, $event);">
...
</tr>

回顾

这里有一些额外的调整，可能有用：

您可以选择使用 Shift 或 Ctrl 或 ⌘（苹果）
如果按下此键，也可以取消选择记录。

我希望这对某人有用。

public setSelectedRow(bo: Bo, event: MouseEvent) {
  // support shift, control and the command key.
  const add = event.shiftKey || event.ctrlKey || event.metaKey;
  if (!add) {
    this.selectedRowSet.clear();
    this.selectedRowSet.add(bo);
    return;
  }

  // toggle selected record
  if (this.selectedRowSet.has(bo)) {
    this.selectedRowSet.delete(bo);
  }
  else {
    this.selectedRowSet.add(bo);
  }
}

【讨论】：

我在mac上尝试了command，const add = event.keyCode === 91 || event.shiftKey;，但它不起作用，你知道为什么吗？
@JSON 根据 mozilla 文档，它应该是event.metaKey（即const add = event.shiftKey || event.ctrlKey || event.metaKey）来源：developer.mozilla.org/en-US/docs/Web/API/MouseEvent/metaKey
我将其包含在答案中。

【解决方案3】：

实际的答案是keyboard 事件内置了这个。

<input (keydown)="onKey($event)"` ...

例如，在一个字段内聚焦，按住 shift 键，然后按住另一个键。

键盘事件包含shiftKey: boolean

【讨论】：

【解决方案4】：

使用keypress

<div class="item" *ngFor="#obj of available" (keypress)="eventHandler($event)"></div>

eventHandler(event) {
   console.log(event, event.keyCode, event.keyIdentifier);
}

【讨论】：