ng-number-picker组件Angular8 - Count在` `mousedown` `上保持增量并从微调器按钮移开

Question

ng-number-picker组件有问题。

如果我们在数字微调器按钮上按下( mousedown )，并在按下状态下拖动鼠标(不要让它触发mouseup事件)到微调器之外，那么它会保持数字的递增/递减。

​

​

当鼠标不在微调按钮上时，我们如何停止组件内部的增量/减量值。

这个问题最初是由Yogesh Kumawat在github上提出的。component reference

Answer 1

您可以监听mouseout/mouseleave事件并调用mouseUp回调，该回调将清除库中设置的计时器，以便在长按鼠标时递增计数值。

ngAfterViewInit() {
  this.upButton=this.elRef.nativeElement.querySelectorAll('.up')[0];
  this.downButton=this.elRef.nativeElement.querySelectorAll('.down')[0];

  this.renderer.listen(this.upButton, 'mouseleave', ($event: any) => {
     console.log('onmouseleave', $event);
     let mouseUpEvent: Event = new MouseEvent('mouseup');
     this.upButton.dispatchEvent(mouseUpEvent);
 });

 this.renderer.listen(this.downButton, 'mouseleave', ($event: any) => {
     console.log('onmouseleave', $event);
     let mouseUpEvent: Event = new MouseEvent('mouseup');
     this.downButton.dispatchEvent(mouseUpEvent);
 });
}

我希望，这会有所帮助。