Mouseenter 事件正在跳过元素答案

【问题标题】：Mouseenter event is skipping elementsMouseenter 事件正在跳过元素
【发布时间】：2018-11-07 10:10:32
【问题描述】：

当mouseenter 事件在元素上被触发时，我有这个指令来做一些事情。但是当我快速拖动鼠标时，一些元素会被跳过而不会触发mouseenter 事件。

我实际上想在鼠标移动时突出显示网格的一系列单元格。我已将此指令添加到网格单元的模板中。

@Directive({
  // tslint:disable-next-line:directive-selector
  selector: '[appRangeSelector]'
})
export class RangeSelectorDirective {

   @Input() public selectorParams: any;

   public isSelected = false;

   constructor(private elRef: ElementRef,
       private renderer: Renderer2) { }

   @HostListener('mouseenter', ['$event']) public onMouseEnter(e) {
       if (e.buttons === 1 || e.buttons === 3) {

           if (!this.isSelected) {
               console.log('selected');
               this.renderer.setStyle(this.elRef.nativeElement, 'background', 'blue');
               this.isSelected = true;
           } else {
               console.log('deselected');
               this.renderer.setStyle(this.elRef.nativeElement, 'background', 'unset');
               this.isSelected = false;
           }

       }
   }

}

当用户以任何速度选择单元格范围时，我需要选择范围。对此的任何帮助表示赞赏。

【问题讨论】：

这不一定是你一开始就可以做的事情......如果浏览器根本没有触发超过一定速度的事件，由于任何限制（物理的、电子的、性能节流……），那么您对此无能为力。如果您只需要在一个方向上的“线”或实心矩形中进行选择，那么您可以考虑替代方案，例如查看鼠标光标停留的时间更长一点，以获得开始和结束“坐标” ，这将允许您将这些单元格之间的所有单元格视为已标记。
收听mouseover 是一种选择吗？ MDN 声称有时出于性能原因它可能是有益的
为什么不使用 Angular 的原生事件而不是添加监听器？

标签： javascript angular mouseenter

【解决方案1】：

操作系统只在一定的时间间隔更新鼠标位置，不保证连续移动。

如果你想防弹，你可能需要监听 mousemove 事件，计算轨迹，并检查它是否与你的任何元素相交。但是，我担心这可能有点重，所以你最好先对其进行基准测试。

【讨论】：