javascript - Angular 应用程序中父组件中的 Rxjs 事件冒泡

Question

问题来了:

• 我有父组件 main
• 我包含了子组件 home，
目录、工作、解决方案、联系我们
• 我有 rxjs 订阅 mousewheel ,swipedown,swipeup 在main(parent) 组件在一个包含其他组件的包装器元素上(请参阅 main.component.html)，这样当我使用鼠标滚轮/向上滑动时，向下单个组件出现在 View 中。 (在 stackblitz 中演示 .. 只需向下/向上滑动鼠标滚轮)
• 我在所有其他组件中都有一个模态弹出窗口/叠加层(在 Stackblitz 其在主页组件中)
• 问题是当我用鼠标滚轮向下滚动它的主页(子组件)中的叠加层时在父组件中触发鼠标滚轮并移动到 View 中的下一个组件。理想情况下，鼠标滚轮/滑动事件不应在叠加层上触发

主要组件.ts :

import { Component, Inject, ViewChild, ElementRef, Renderer2, OnInit, HostListener } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { fromEvent, empty } from 'rxjs';
import { debounceTime, map, merge, take, first, combineLatest, concatMap, takeUntil, elementAt, catchError, filter } from 'rxjs/operators';
@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.scss']
})
export class MainComponent implements OnInit {
  index = 0;
  public theme: string;
  public isModalOpened = false;
  selectedIndex = 0;
  public themeData;
  public totalChildren;
  public openSideMenu = false;
  @ViewChild('scrollMe') scrollMe: ElementRef;
  // @ViewChild('scrollTop') scrollTop: ElementRef;

  constructor(@Inject(DOCUMENT) private document: any, private renderer: Renderer2) {

  }

  ngOnInit() {
    fromEvent(this.scrollMe.nativeElement, 'wheel').pipe(
      debounceTime(200)
    ).subscribe((e: WheelEvent) => {
      console.log(e)
      if (e.deltaY > 0) {
        this.moveToNextSection();
      } else {
        this.moveUp();
      }
    });

    this.themeData = {
      0: 'dark',
      1: 'semi_light',
      2: 'light',
      3: 'light',
      4: 'dark',
      5: 'light',
      6: 'semi_light',
      7: 'semi_light'
    };

    this.theme = this.themeData[0];
    const mouseEventToCoordinate = mouseEvent => {
      // mouseEvent.preventDefault();
      return {
        x: mouseEvent.clientX,
        y: mouseEvent.clientY
      };
    };

    const touchEventToCoordinate = touchEvent => {
      // touchEvent.preventDefault();
      return {
        x: touchEvent.changedTouches[0].clientX,
        y: touchEvent.changedTouches[0].clientY
      };
    };

    const mouseDowns = fromEvent(this.scrollMe.nativeElement, 'mousedown').pipe(
      map(mouseEventToCoordinate)
    );

    const mouseMoves = fromEvent(this.scrollMe.nativeElement, 'mousemove').pipe(
      map(mouseEventToCoordinate)
    );
    const mouseUps = fromEvent(this.scrollMe.nativeElement, 'mouseup').pipe(
      map(mouseEventToCoordinate)
    );

    const touchStarts = fromEvent(this.scrollMe.nativeElement, 'touchstart').pipe(
      map(touchEventToCoordinate)
    );
    const touchMoves = fromEvent(this.scrollMe.nativeElement, 'touchmove').pipe(
      map(touchEventToCoordinate)
    );
    const touchEnds = fromEvent(this.scrollMe.nativeElement, 'touchend').pipe(
      map(touchEventToCoordinate)
    );

    const starts = mouseDowns.pipe(
      merge(touchStarts)
    );
    const moves = mouseMoves.pipe(
      merge(touchMoves)
    );
    const ends = mouseUps.pipe(
      merge(touchEnds)
    );

    starts.pipe(
      concatMap((dragStartEvent) => {
        return moves.pipe(
          takeUntil(ends),
          elementAt(3),
          catchError(err => empty()),
          map(ev => {
            const intialDeltaX = ev.x - dragStartEvent.x;
            const initialDeltaY = ev.y - dragStartEvent.y;
            return { x: dragStartEvent.x, y: dragStartEvent.y, intialDeltaX, initialDeltaY };
          })
        );
      })
    ).subscribe(res => {
      if (Math.abs(res.intialDeltaX) < Math.abs(res.initialDeltaY)) {
        if (res.initialDeltaY < 0) {
          this.moveToNextSection();
        } else {
          this.moveUp();
        }
      }
    });

  }

  @HostListener('window:resize', ['$event'])
  onResize(event) {
    const elementTopPosition = this.scrollMe.nativeElement.children[this.index].offsetTop;
    this.renderer.setStyle(this.scrollMe.nativeElement, 'transform', `translate3d(0px,-${elementTopPosition}px,0px)`);
  }

  moveToNextSection() {
    const elementLength = this.scrollMe.nativeElement.children.length;
    if ((this.index + 1) < elementLength) {
      this.index++;
      this.theme = this.themeData[this.index];
      this.selectedIndex = this.index;

      const elementTopPosition = this.scrollMe.nativeElement.children[this.index].offsetTop;
      this.renderer.setStyle(this.scrollMe.nativeElement, 'transform', `translate3d(0px,-${elementTopPosition}px,0px)`);
      // this.renderer.setStyle(this.scrollTop.nativeElement, 'opacity', `1`);
    }
  }

  moveUp() {
    const elementLength = this.scrollMe.nativeElement.children.length;
    if (((this.index - 1) < elementLength) && this.index !== 0) {
      this.index--;
      this.theme = this.themeData[this.index];
      this.selectedIndex = this.index;
      const elementTopPosition = this.scrollMe.nativeElement.children[this.index].offsetTop;
      this.renderer.setStyle(this.scrollMe.nativeElement, 'transform', `translate3d(0px,-${elementTopPosition}px,0px)`);
      // this.renderer.setStyle(this.scrollTop.nativeElement, 'opacity', `1`);
    }
  }

  moveToIndividualSection(i) {
    this.selectedIndex = i;
    if (i === 0) {
      // this.renderer.setStyle(this.scrollTop.nativeElement, 'opacity', `0`);
      this.index = 0;
      this.theme = this.themeData[this.index];
    } else {
      this.index = i;
      this.theme = this.themeData[this.index];
      // this.renderer.setStyle(this.scrollTop.nativeElement, 'opacity', `1`);
    }
    const individualelementTopPosition = this.scrollMe.nativeElement.children[i].offsetTop;
    this.renderer.setStyle(this.scrollMe.nativeElement, 'transform', `translate3d(0px,-${individualelementTopPosition}px,0px)`);

  }

  scrollToTop() {
    this.selectedIndex = 0;
    this.renderer.setStyle(this.scrollMe.nativeElement, 'transform', `translate3d(0px,0px,0px)`);
    // this.renderer.setStyle(this.scrollTop.nativeElement, 'opacity', `0`);
    this.index = 0;
    this.theme = this.themeData[this.index];
  }

  onModalOpen(ev) {
    this.isModalOpened = ev;
  }

  openMenu() {
    this.openSideMenu = true;
  }
}

main.component.html

<div class="ey-page">
  <main>
    <div class="bfs-scroll-container" #scrollMe draggable="false">
      <app-home></app-home>
      <app-catalog></app-catalog>
      <app-pivot></app-pivot>
      <app-work></app-work>
      <app-solutions></app-solutions>
      <app-map></app-map>
      <app-contactus></app-contactus>
    </div>
    <div class="ey-slide-scroll-indi" *ngIf="index !==6">
      <a href="#" class="ey-button-next-slide ey-icon-back-arrow-after ey-slide-show-scroll-indi" data-down-button="">
        <img  *ngIf="theme==='dark'" src="assets/images/ic_down-arrow.png" (click)="moveToNextSection()" alt="">
        <img  *ngIf="theme==='light'" src="assets/images/ic_down-arrow-black.png" (click)="moveToNextSection()"
          alt="">
        <img  *ngIf="theme==='semi_light'" src="assets/images/ic_down-arrow-black.png" (click)="moveToNextSection()"
          alt="">
      </a>
    </div>
    <div>
      <div class="ey-slide-nav-container ey-back-link-slide-in">
        <!-- <a class="ey-back-link ey-icon-top-arrow-before no-barba" style="opacity: 0;" #scrollTop (click)="scrollToTop();">
          <!-- <img src="assets/images/up-arrow.png" alt=""> --
        </a> -->
        <div class="ey-progress-bar" [ngClass]="{'hideMenu':isModalOpened}"></div>
        <ul class="ey-slide-nav" [ngClass]="{'light':theme==='light','half_light':theme ==='semi_light'}" [ngStyle]="{'opacity':isModalOpened? '0.3':1}">
          <li class="ey-slide-nav-item ey-slide-nav-item-numeric" [ngClass]="{'ey-slide-nav-item-selected':selectedIndex===0}" (click)="moveToIndividualSection(0)">
          </li>

          <li class="ey-slide-nav-item ey-slide-nav-item-numeric" [ngClass]="{'ey-slide-nav-item-selected':selectedIndex===1}" (click)="moveToIndividualSection(1)">
          </li>

          <li class="ey-slide-nav-item ey-slide-nav-item-numeric" [ngClass]="{'ey-slide-nav-item-selected':selectedIndex===2}" (click)="moveToIndividualSection(2)">
          </li>

          <li class="ey-slide-nav-item ey-slide-nav-item-numeric" [ngClass]="{'ey-slide-nav-item-selected':selectedIndex===3}" (click)="moveToIndividualSection(3)">
          </li>

          <li class="ey-slide-nav-item ey-slide-nav-item-numeric" [ngClass]="{'ey-slide-nav-item-selected':selectedIndex===4}" (click)="moveToIndividualSection(4)">
          </li>

          <li class="ey-slide-nav-item ey-slide-nav-item-numeric" [ngClass]="{'ey-slide-nav-item-selected':selectedIndex===5}" (click)="moveToIndividualSection(5)">
          </li>

          <li class="ey-slide-nav-item ey-slide-nav-item-numeric" [ngClass]="{'ey-slide-nav-item-selected':selectedIndex===6}" (click)="moveToIndividualSection(6)">
          </li>

          <!-- <li class="ey-slide-nav-item ey-slide-nav-item-numeric" [ngClass]="{'ey-slide-nav-item-selected':selectedIndex===7}" (click)="moveToIndividualSection(7)">
          </li> -->

          <!-- <li class="ey-slide-nav-item ey-slide-nav-item-numeric  opacity-none">
          </li>

          <li class="ey-slide-nav-item ey-slide-nav-item-numeric  opacity-none">
          </li>

          <li class="ey-slide-nav-item ey-slide-nav-item-numeric  opacity-none">
          </li> -->

        </ul>
      </div>
    </div>
  </main>
</div>

问题是任何子组件上的鼠标滚轮事件覆盖父组件事件中的触发事件，这不应该发生。

HTML 的结构符合 https://wavespace.ey.com/

Answer 1

我在控制台中检查了 stopPropogation，它按预期工作。您可以通过执行以下操作来尝试此操作:单击打开叠加层，检查元素，选择叠加层转到控制台粘贴此内容:

$0.addEventListener('wheel', (e) => {console.log('child'); e.stopPropagation()}); 

然后滚动。