при наведении курсора вверх / вниз на весь угловой SPA - PullRequest
Новая
       64

при наведении курсора вверх / вниз на весь угловой SPA

0 голосов
/ 05 мая 2019

В моем классе компонентов у меня есть 

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

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

В этом проекте я также использую библиотеку swiper . Мой swiper имеет высоту 200px и ширину 100%. Swiper использует несколько собственных событий для «захвата» элементов, чтобы сделать его фактически смахивающим.

Теперь, когда моя мышь находится над элементом swiper и я нажимаю выше, код не перехватывает событие.

Этого не должно быть, но это так. Еще более странным является то, что он не ловит только левый клик, правый клик работает правильно.

Как сделать так, чтобы она работала, даже если мышь находится поверх свипера?

Редактировать

По какой-то причине я не могу воспроизвести проблему на игровой площадке онлайн-кода, поэтому я создал очень простое приложение, содержащее всего два компонента, и я отправил его в git .

В этом проекте я показываю {{ holding }}, и, как вы можете видеть (если вы клонируете и ng serve это приложение), при нажатии вверху или внизу страницы оно меняется с false на true, но когда щелкнув по swiper, он не поймает onMouseDown и значение не изменится.

1 Ответ

2 голосов
/ 05 мая 2019

, поскольку Swiper предотвращает отправку внутреннего элемента DOM, вы можете использовать Event API от swiper для получения информации о том, что происходит внутри основного элемента Swiper.

Например, в вашем случае вы можете сделать что-то вроде этого: 

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

Я не могу предложить вам тянуть запрос на ваш проект, потому что я не имею права делать это. Вы можете увидеть это в действии здесь

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

git fetch fork issues_1

...