javascript - 在错误的元素上触发角度事件

Question

问题：

我有一个带有绑定(wheel)事件侦听器的容器，其中包含一些标题和段落，仅用于演示目的。当我使用鼠标滚轮滚动时，滚动事件发生在其中一个内部元素上，而不是发生在具有绑定事件的容器上。

为什么事件是在容器的子元素上触发而不是在绑定元素本身上触发？

背景：

我在 StackBlitz 上玩 angular，想在容器上实现一个事件监听<div>器来处理滚动事件：

  <div class="inner no-scroll" (wheel)="blockScroll($event)">

在我app.component.ts创建了要调用的事件处理程序：

blockScroll(e) {

    console.log(e);

    if (e.target !== e.currentTarget) {
      return;
    }

    let eO = e; // e.originalEvent;
    var delta = eO.deltaY || -eO.detail;
    e.target.scrollTop += delta * 30;

    e.stopPropagation();
    e.preventDefault();
}

在 Firefox 开发人员工具中，我看到该事件已正确绑定到<div>：

现在，当我在容器上使用鼠标滚轮时，我发现几乎在所有情况下，事件目标都不是绑定的<div>，而是容器内的一个<h3>或元素。<p>我想知道为什么错误的元素触发了滚动事件？

标签： javascripthtmlangular

Answer 1

这是预期的行为。

• target- 触发事件的元素（滚动开始时鼠标指针正下方的元素）
• currentTarget- 监听事件的div元素（本例中的元素）

因此，如果您指向容器的顶部并开始滚动，两者target和currentTarget都将指向同一个div元素。但是一旦它滚动到容器的顶部，鼠标指针正下方的元素将是<p>or<h3>元素。