Javascript 如何在日期输入中区分鼠标选择和键盘事件

我试图在日期类型的输入中区分鼠标和键盘输入：

模板

<input type="date" (change)="onChange($event)">

最简单的闪电战：

---

可能吗？我需要订阅多个不同的事件吗？

首先是根据MDN定义的

点击
和
更改
事件


当定点设备按钮（例如
作为鼠标的主鼠标按钮），在
指针位于元素内部


针对
、
和
触发更改事件
元素提交对元素值的更改时
用户。与输入事件不同，更改事件不一定是
为元素值的每次更改激发

现在，如果您看到click事件可用于所有元素，但change仅可用于
输入，请选择并发送文本区域
。从定义上也可以清楚地看出，当元素的值发生更改/更改时，会触发后者

因此，为了捕获这两个事件，您必须分别捕获这两个事件，如下所示

<input type="date" #input [ngModel]="myInput" (change)="onChange($event)" (click)="onClick($event)" (keydown)="onKeydown($event)" >


export class AppComponent {
  isKeyboardChange: boolean;
  isDatepickerChange: boolean;

  onChange(event) {
    // How to check if user used the mouse to select a date
    // or if he typed a date
    console.log(event.type);
    if (this.isKeyboardChange) {
      console.log("Was changes using Keyboard");
    }

    if (this.isDatepickerChange) {
      console.log("Was changes using date picker");
    }
  }

  onClick(event) {
    this.isKeyboardChange = false;
    this.isDatepickerChange = true;
  }

  onKeydown(event) {
    this.isDatepickerChange = false;
    this.isKeyboardChange = true;
  }
}

尝试使用
onMouseDown
和
onKeyDown
<无论最后一个事件是否为
mouseDown
，code>mouseLast都将是布尔值

模板

<input type="date" (change)="onChange($event)">


控制器

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  onChange(event) {
    // How to check if user used the mouse to select a date
    // or if he typed a date
    console.log(event);
  }
}


import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  onMouse() {
    this.mouseLast = true;
  }
  onKey() {
    this.mouseLast = false;
  }
  onChange(event) {
    if (this.mouseLast == undefined || this.mouseLast == null) {
        return;
    }
    console.log(this.mouseLast);
  }
}

问题是，（单击）事件的行为与日期输入的预期方式不同。例如，当用户单击向下箭头时会触发事件，但当用户选择日期时不会触发事件@vega如果我订阅
（change）
@vega，类型总是
change
，如果你将它与（输入）和（单击）的存在结合起来，你就可以区分事件发生的地方了？让我在演示中试试：）类似这样的东西，尽管我觉得你在寻找更复杂的东西：Hi@Manish。谢谢你的详细回答。我知道不同的事件类型。我试图解决的问题是，日期值的更改是通过单击还是通过键盘输入进行的。我不认为你的例子能证明这一点？你好！你能链接到更新的stackblitz吗？我认为我创建的那个仍然没有改变？嘿@Manish。我认为你更新的例子解决不了我的问题。在结果更改事件中，我仍然无法确定用户是使用鼠标还是键盘启动更改。请看
sportzpikachu
s的答案。他用我需要的方式工作。但我不确定事件的顺序是否总是相同的。@Riscie这是正确的，根据另一个答案，顺序不会相同。但随着更新，我所做的顺序将始终相同，即先按键，然后更改，然后单击，然后更改。让我做一件事更新stackblitzaccordingly@Riscie更新stackblitz的答案和工作演示。希望这能解决你的问题：）谢谢你的回答。我在考虑这个解决方案。实际上，我们可以确定
mousedown
和
keydown
事件总是在
change
事件之前触发吗？如果是这样的话，并且有一些相关的文档，我会把它看作是一个有效的答案。我做了一些研究。似乎js标准没有定义事件顺序。浏览器可以自由地实现它们。然而，我发现在
更改
之前启动
鼠标向下
和
键向下
总是有意义的，所以我不确定答案是否在所有浏览器中都是正确的。。。（参考：）嘿，@Riscie，很抱歉我不能早点给你回复，但正如你所说，
mousedown
和
keydown
事件可能不会在
change
事件之前触发。因此，您可以添加一个
if
语句来检查是否声明了
mouseLast
？希望这对你有帮助！我编辑了我的答案以反映这些变化。