javascript - 鼠标在整个 SPA Angular 上向上/向下

Question

在我的组件类中，我有

@HostListener('document:mousedown', ['$event'])
onMouseDown() {
    this.holding = true;
}

@HostListener('document:mouseup', ['$event'])
onMouseUp() {
    this.holding = false;
}

在这个项目中我还使用 swiper library 。我的 swiper 高度为 200px，宽度为 100%。 Swiper 使用一些自己的事件来捕获“抓取”元素，使其真正可滑动。

现在，当我将鼠标放在 swiper 元素顶部并单击上面的代码时，不会捕获该事件。

这不应该发生，但它确实发生了。更奇怪的是，它不仅仅捕获鼠标左键单击，右键单击也能正常工作。

如何使其即使在鼠标位于滑动器顶部时也能工作？

<小时/>

编辑

由于某种原因，我无法在在线代码 Playground 上重现问题，因此我创建了一个非常基本的应用程序，仅包含两个组件，并且我 pushed it to git .

在此项目中，当单击顶部或页面底部它从 false 更改为 true 但当单击 swiper 时，它不会捕获 onMouseDown 并且该值不会更改。

Answer 1

因为 Swiper 阻止内部 DOM 元素的调度，您可以使用 Event API从 swiper 获取 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();
    });

您可以在应用程序中引入新服务，以将这个技巧抽象到应用程序的其余部分，以便绑定(bind)在所有 mousedown | 上。鼠标松开事件。您可以在下面找到实现:

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();
  }
}

现在您已经有了对 native mousedown 和 mouseup 事件使用react的可观察对象，也可以通过手动 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 远程添加分支 https://bitbucket.org/yghidouche/ng-hover-issue

git fetch fork issues_1