mouseup/down 整个 SPA angular

Question

在我的组件中class我有

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

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

在这个项目中我也使用了swiper library。我的刷卡器高度为 200 像素，宽度为 100%。 Swiper 使用一些自己的事件来捕获 "grabing" 元素，使其真正可滑动。

现在，当我将鼠标放在 swiper 元素上并单击时，上面的代码没有捕捉到事件。

这不应该发生，但它确实发生了。更奇怪的是，它不仅捕获鼠标左键单击，还可以正确单击鼠标右键。

如何使鼠标在滑动条上时也能正常工作？

编辑

出于某种原因，我无法在在线代码操场上重现问题，所以我创建了只有两个组件的非常基本的应用程序，并且 pushed it to git。

在这个项目中，我正在显示 {{ holding }}，如您所见（如果您克隆并 ng serve 此应用程序），当点击页面顶部或底部时，它会从 false 到 true 但是当点击滑动器时它没有捕捉到 onMouseDown 并且值没有改变。

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 |鼠标弹起事件。您可以在下面找到实现：

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

mouseup/down 整个 SPA angular

mouseup/down on entire SPA angular

javascript

mouseup

mousedown

swiper

angular