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事件，计算轨迹，并检查其是否与您的任何元素相交。但是，恐怕这可能会很重，因此您最好先对其进行基准测试。

Mouseenter事件正在跳过元素

1 个答案: