怎么在ng4中阻止触摸事件的冒泡or渗透？

Question

我用ng4写了一个触摸滑动组件，部分代码如下：

let touchstart = Observable.fromEvent(this.el.nativeElement,'touchstart')
let touchmove = Observable.fromEvent(this.el.nativeElement, 'touchmove')
let touchend = Observable.fromEvent(this.el.nativeElement, 'touchend')

touchstart.map((start:any) => {
  return new Position(start.touches[0].pageX, start.touches[0].pageY)
}).subscribe(start => {
  this.duration = 0;
  this.touchObject.start = start
  transObject.start = new Position(this.trans.x, this.trans.y)
});

......

这个组件是fixed在最上层的，他响应触摸滑动的时候，它下面的内容也会跟着一起滑动，有什么办法能够只让它自己滑动呢？

Answer 1

没试过。试试Observable加个filter

let touchstart = Observable.fromEvent(this.el.nativeElement,'touchstart').pipe(
    filter((evt:any) => evt.target == this.el.nativeElement)
)

或者加个tap中阻止冒泡试试。

let touchstart = Observable.fromEvent(this.el.nativeElement,'touchstart').pipe(
    tap((evt:any) => evt.stopPropagation())
)

Rxjs 5+

Answer 2

不知道你说的这个组件和下面的内容是不是在一个组件里面， 如果在一个组件里面的话，
只需要监听具体的元素就可以了。

let upperElement = this.el.nativeElement.querySelector("upperElement");
let touchstart = Observable.fromEvent(upperElement,'touchstart');
let touchmove = Observable.fromEvent(upperElement, 'touchmove');
let touchend = Observable.fromEvent(upperElement, 'touchend');