Angular 8：如何将点击事件发送到特定坐标答案

【问题标题】：Angular 8: How to send click event to specific coordinateAngular 8：如何将点击事件发送到特定坐标
【发布时间】：2020-01-21 18:50:03
【问题描述】：

我想知道如何将点击事件发送到屏幕上的特定坐标，例如角度像素（700,700）？

我搜索了这个问题，发现仅适用于纯 JavaScript 的解决方案，您可以在其中使用文档元素，但您不能在 Angular 8 中执行此操作。

我原来的问题是：我有一个 div 元素，它有一个点击事件，点击事件的回调检查它是否点击了特定区域，如果是，它将最小化 div。所以我想编写一个单元测试，并将点击事件发送到该 div。

我该怎么做？提前谢谢。

【问题讨论】：

听起来像triggerEventHandler，因为坐标可以在响应式应用上改变。
如果click是通过angular绑定到一个函数上的，没有click事件就不能测试那个函数吗？
@fingeron 事件处理程序正在检查事件...

标签： angular typescript unit-testing

【解决方案1】：

希望我能正确理解你...

如果你想触发点击特定的 div，你可以使用 @ViewChild('YOUR_DIV_ID', {static: true}) div;

然后，在您的测试中，您可以触发点击事件 - div.nativeElement.click()

【讨论】：

感谢您的回答，但我很抱歉，这不是我的意思。我的意思是，所以你在 div 上引发了一个点击事件，太好了。但是如何使点击成为像素（700,700）？比如“在像素（x，y）上进行点击事件”。它与我有关...
也许你可以使用document.elementFromPoint(700, 700)，如果元素存在触发一个事件？
我认为在角度使用文档对象是有问题的。我认为我们只需要在纯 javascript 中使用它。我终于找到了 angular 的东西，它只是创建一个带有初始参数的 MouseEvent 对象:)

【解决方案2】：

所以它对我有用：

在我的单元测试中：

let section = fixture.debugElement.queryAll(By.css('.data-wrapper'))[0];
const mouseDblEvent = new MouseEvent('dblclick', <MouseEventInit>{ clientX: 700, clientY: 700 }) ;

section.nativeElement.dispatchEvent(mouseDblEvent);
fixture.detectChanges();

这里的主要思想是使用初始参数创建 MouseEvent。

【讨论】：

【解决方案3】：

如果你在 div 上有 (click) 事件，则将其添加到组件中以获取坐标：

onClickEvent(event: MouseEvent) {
  const x = event.offsetX,
  const y = event.offsetY
}

【讨论】：

OP 知道如何获取坐标，他们在询问如何在特定坐标处伪造点击