CODEWITHSUNDEEP
javascriptrxjs
Artee
Artee

Reputation: 834

Simultaneous clicking of the left and right mouse buttons using RxJS

I need to catch the event simultaneously pressing the left and right mouse buttons with RxJS. More precisely, you need to catch the mouseup event with the right and left mouse buttons with a maximum difference of 300 ms.

Upvotes: 1

Views: 366

Answers (2)

Artee
Artee

Reputation: 834

On the advice of Tom Cumming

import { fromEvent, combineLatest } from 'rxjs'
import { filter, map } from 'rxjs/operators'
const upLeft$ = fromEvent(document, 'mouseup').pipe(filter((e) => e.which === 1), map(()=>Date.now()))
const upRight$ = fromEvent(document, 'mouseup').pipe(filter((e) => e.which === 3), map(()=>Date.now()))

const combined$ = combineLatest(upLeft$ , upRight$).pipe(filter((e)=> (e[1]-e[0])<=300 && (e[1]-e[0])>0), map((e)=> (e[1]-e[0])));

combined$.subscribe(() => {
console.log("It work!!!")
});

Upvotes: 0

Tom Cumming
Tom Cumming

Reputation: 1168

  1. Create two streams, one for left and one for right clicks
  2. map both of these the Date.now()
  3. Then you want to combineLatest the two streams
  4. Finally filter the values which are more than 300ms apart

Upvotes: 2

Related Questions