Question

在我的组件类中，

list = ['abc', '123', 'abc123']

在该项目中，我还使用了swiper library。我的刷卡器高度为200px，宽度为100％。刷卡器使用一些自己的事件来捕获“抓取”元素，以使其可实际刷卡。

现在，当我将鼠标放在swiper元素上方并且单击上面的代码时，该事件将无法捕获。

这应该不会发生，但确实如此。同样使它变得更奇怪的是，它不能仅捕获鼠标左键单击，而是可以正确地单击鼠标右键。

即使鼠标位于滑动器上方，如何使它工作？

编辑

由于某种原因，我无法在在线代码游乐场重现问题，因此我创建了一个非常基本的应用，其中只有两个组件，我pushed it to git。

在此项目中，我正在显示@HostListener('document:mousedown', ['$event']) onMouseDown() { this.holding = true; } @HostListener('document:mouseup', ['$event']) onMouseUp() { this.holding = false; }，如您所见（如果您克隆并{{ holding }}这个应用程序），则单击页面顶部或底部时，它会从ng serve变为到false，但是单击滑动键时它不会捕获true，并且值也不会改变。

Answer 1

由于Swiper阻止了内部DOM元素的调度，因此您可以在swiper中使用Event API来获取Swiper主dom元素内部发生的情况。

例如，对于您的案例，您可以执行以下操作：

    this.mySwiper = new Swiper('.nav', {
        paginationClickable: false,
        grabCursor: true,
        loop: true,
        autoplay: 1000,
        slidesPerView: 3,
        spaceBetween: 50
    });

    this.mySwiper.on('touchStart', () => {
        this.touchService.triggerTouchStart();
    });
    this.mySwiper.on('touchEnd', () => {
        this.touchService.triggerTouchStop();
    });

您可以在您的应用程序上引入新服务，以抽象到您的应用程序的其余部分，此技巧将在所有mousedown上绑定| mouseup事件。在下面您可以找到实现：

export class TouchService {
  private _manualControl$: Subject<boolean>;

  constructor() {
    this._manualControl$ = new Subject();
    // React to the document mouse event.
    fromEvent(document, 'mousedown').subscribe(() => this.triggerTouchStart());
    fromEvent(document, 'mouseup').subscribe(() => this.triggerTouchStop());
  }
  // Can be call manually to force new state.
  triggerTouchStart(): void {
    this._manualControl$.next(true);
  }

  triggerTouchStop(): void {
    this._manualControl$.next(false);
  }

  get touch$(): Observable<boolean> {
    return this._manualControl$.asObservable();
  }
}

现在您可以观察到，它们会对本机mousedown和mouseup事件做出反应，也可以通过手动API调用（如

）触发

    this.mySwiper.on('touchStart', () => {
        this.touchService.triggerTouchStart();
    });
    this.mySwiper.on('touchEnd', () => {
        this.touchService.triggerTouchStop();
    });

最后，您可以像下面这样使用该服务：

constructor(private touchService: TouchService) {
    this.touchService.touch$.subscribe(e => this.holding = e);
}

我不建议您对您的项目提出请求，因为我没有权利这样做。 You can see it in action here

git remote add fork https://bitbucket.org/yghidouche/ng-hover-issue

git fetch fork issues_1

整个SPA角度上的鼠标上/下

1 个答案: