主机侦听器'scroll'事件未触发，但'mouseenter'事件工作正常

Question

我有一个带有自定义组件("ImagePicker"(的简单Stacklitz。此组件设置了溢出属性，因此内容会使其滚动。

我正在使用@HostListener尝试捕获scroll事件，但由于某种原因，它不起作用。我还创建了一个mouseenter事件，这确实很好。

为什么滚动不起作用？

https://stackblitz.com/edit/imagepicker

Answer 1

您可能希望出现滚动事件，但它只有在document滚动时才会出现。这意味着您可以在document滚动时捕获window对象上的滚动事件。

任何其他滚动事件都不会弹出，应该在实际滚动的元素上处理。在您的情况下，正如@AliF50所说，您必须将监听器放在图像选择器内的div上：

<div class="imagepicker" (scroll)="onScroll()">

这样做的原因是为了避免性能问题，因为滚动事件可以以高速率触发。例如，当使用平滑滚动时。

来自W3规格

对于文档的挂起滚动事件目标中的每个项目目标，按照它们添加到列表的顺序，运行以下子步骤：

如果目标是文档，则激发一个名为"滚动"的事件，该事件在目标处冒泡。

否则，向目标发射一个名为"滚动"的事件。

Answer 2

为了使滚动事件工作，hostBinding包和事件被提到错误。请遵循此代码

import { Component, HostListener, HostBinding } from "@angular/core";

@HostListener("window:scroll", ["$event"])
onScrollEvent($event) {
console.log("blah");
this.eventData = $event;
}

选择正确的hostlistener和事件名称以使其工作。