javascript - Mouseenter 事件正在跳过元素

Question

当元素上触发 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;
           }

       }
   }

}

当用户以任何速度选择单元格范围时，我需要选择范围。任何有关此问题的帮助都将不胜感激。

Answer 1

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

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