Mouseenter事件正在跳过元素 [英] Mouseenter event is skipping elements

问题描述

当在元素上触发 mouseenter 事件时，我具有此指令来执行某些操作.但是，当我快速拖动鼠标时，在元素上方跳过了某些元素而未触发 mouseenter 事件.

I have this directive to do something when the mouseenter event is triggered on an element. But when I drag the mouse fast, over the elements some elements are getting skipped without triggering the mouseenter event.

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

I actually want to highlight a range of cells of a grid when the mouse moves. I have added this directive to the template of the grid cell.

@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;
           }

       }
   }

}

当用户以任意速度选择单元格范围时，我需要选择范围.感谢您提供任何帮助.

I need to select the range when the user select the cell range in any speed. Any help about this is appreciated.

推荐答案

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

Operating system only update mouse position at a certain interval, and continuous movement is not garanteed.

如果要防弹，可能需要收听mousemove事件，计算轨迹并检查它是否与您的任何元素相交.但是，恐怕这可能会有些沉重，因此您最好先对其进行基准测试.

If you want to be bulletproof, you might need to listen to mousemove event, calculate trajectory, and check if it intersect with any of your element. However, I'm afraid that this can be somewhat heavy, so you better benchmark it first.

这篇关于Mouseenter事件正在跳过元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！