我想從RxJS中的觸摸事件重新創建背景關系選單事件，因為 iOS不支持觸??摸背景關系選單事件。
用簡單的語言來說，這個 observable 應該在以下情況下發出：
- touchstart 事件發生
- 2000 毫秒（基本上是長按）
- 其次是觸摸端
它不應該在以下情況下發射：
- 觸摸端發生在不到 2000 毫秒
- touchstart 事件之后是 touchmove 事件
如果 touchend 發生得更快或者 touchstart 之后是 touchmove，我不知道如何跳過。這是我到目前為止：
const touchStart$ = fromEvent<TouchEvent>(this.el.nativeElement, "touchstart");
const touchEnd$ = fromEvent<TouchEvent>(this.el.nativeElement, "touchend");
const touchMove$ = fromEvent<TouchEvent>(this.el.nativeElement, "touchmove");
const contextmenu$ = touchStart$.pipe(
switchMap(event => touchEnd$.pipe(mapTo(event))),
switchMap(event => timer(2000).pipe(mapTo(event), takeUntil(merge(touchEnd$, touchMove$))))
);
contextmenu$.subscribe($event => {
console.log("CONTEXTMENU EVENT HAPPENED");
});
uj5u.com熱心網友回復：
您的解決方案可以簡化一點。內部mapTo不是必需的，如果你不重用 name ，你可以在管道的末尾event使用一個。mapTo此外，您可能希望使用take(1)而不是takeUntil(touchMove$)內部switchMap，因為您想在第一次發射后結束流：
const longPress$ = this.touchStart$.pipe(
switchMap(event => timer(2000).pipe(
takeUntil(merge(touchMove$, touchEnd$)),
switchMap(() => touchEnd$.pipe(take(1))),
mapTo(event)
))
);
我假設你得到了你想要的行為，但我認為通常會在持續時間過去時觸發長按；即我們不需要等待touchend事件。如果是這樣的話，那就更簡單了：
const longPress$ = this.touchStart$.pipe(
switchMap(event => timer(2000).pipe(
takeUntil(merge(touchMove$, touchEnd$)),
mapTo(event)
))
);
這里有幾個 StackBlitzes 與多彩的日志記錄：原始| 簡化
uj5u.com熱心網友回復：
我想出了一個可能的解決方案：
const touchStart$ = fromEvent<TouchEvent>(this.el.nativeElement, "touchstart");
const touchEnd$ = fromEvent<TouchEvent>(this.el.nativeElement, "touchend");
const touchMove$ = fromEvent<TouchEvent>(this.el.nativeElement, "touchmove");
const contextmenu$ = touchStart$.pipe(
switchMap(event =>
timer(2000).pipe(
mapTo(event),
takeUntil(merge(touchMove$, touchEnd$)),
switchMap(event => touchEnd$.pipe(mapTo(event), takeUntil(touchMove$)))
)
)
);
contextmenu$.subscribe($event => {
console.log("CONTEXT MENU EVENT HAPPENED");
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/477935.html