RxJs mousemove событие с условием - PullRequest
Новая
       3

RxJs mousemove событие с условием

0 голосов
/ 26 сентября 2018

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

const { fromEvent } = rxjs;
const { debounceTime, tap, filter } = rxjs.operators;

const square = document.querySelectorAll("#square");

let isCursorOverSquare = true;

const move$ = fromEvent(square, "mousemove");
const enter$ = fromEvent(square, "mouseenter");
const leave$ = fromEvent(square, "mouseleave");

enter$.pipe(
    tap(() => isCursorOverSquare = true)
).subscribe();

leave$.pipe(
    tap(() => isCursorOverSquare = false)
).subscribe();

move$
.pipe(
    debounceTime(2000),
    filter(() => isCursorOverSquare)
)
.subscribe(
   (e) => {
       console.log(e.target); 
});
#square {
  width: 200px;
  height: 200px;
  display: block;
  border: 1px solid black;
}
<script src="https://unpkg.com/rxjs@6.3.2/bundles/rxjs.umd.min.js"></script>
<div id="square"></div>

Я не могу понять, как пропустить console.log, если пользователь перемещается из квадрата наружу (т.е. обрабатываеттолько логика, когда пользователь находится с курсором внутри квадрата).

РЕДАКТИРОВАТЬ: Мне удалось это сделать, но это не "RxJs" способ.Теперь я устанавливаю переменную isCursorOverSquare на true и false, а затем использую оператор filter.Есть ли более приятный, более реактивный способ справиться с этим?

Ответы [ 2 ]

0 голосов
/ 26 сентября 2018

Проблема, с которой вы столкнулись - это последнее событие mousemove, которое запускается, когда курсор все еще находится в квадрате, но откат задерживает наблюдаемое до тех пор, пока курсор не покинет квадрат.Вы можете решить эту проблему, взяв только наблюдаемое, пока мышь не покинет квадрат.Вот полный код для этого ответа: 

<head>
    <style>
        #square {
            width: 200px;
            height: 200px;
            display: block;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div id="square"></div>
    <script src="https://unpkg.com/rxjs@6.3.2/bundles/rxjs.umd.min.js"></script>
    <script>
        const { fromEvent } = rxjs;
        const { debounceTime, repeat , takeUntil } = rxjs.operators;

        const square = document.getElementById("square");

        const move$ = fromEvent(square, "mousemove").pipe(debounceTime(2000));
        const enter$ = fromEvent(square, "mouseenter");
        const leave$ = fromEvent(square, "mouseleave");

        move$.pipe(takeUntil(leave$), repeat()).subscribe((e) => console.log(e.target));
    </script>
</body>

Оператор repeat необходим, так как в противном случае, как только мышь покинула квадрат в первый раз,наблюдаемое не будет повторяться, когда мышь в следующий раз входит в квадрат.Если вы хотите, чтобы наблюдаемое поведение прекращало излучение после того, как мышь впервые покинула квадрат, не стесняйтесь удалить оператор повтора.Надеюсь, это поможет вам, дайте мне знать, если у вас есть какие-либо вопросы!

0 голосов
/ 26 сентября 2018

Поэтому, если я правильно понимаю ваш вопрос, вы хотите:

  • Отслеживать все движения мыши (mousemove поток событий - fromevent)
  • После того, как движение останавливается на определенное время (debounce)
  • Убедитесь, что оно находится в ограничительной рамке (filter)

Таким образом, в зависимости от производительности вы всегда можете вызывать перемещения мыши или запускать события перемещения мыши только после ввода квадрата с помощью оператора .switchMap(): 

enter$
  .switchMap(_ => $moves
    .debounceTime(2000)
    .takeUntil(leave$)
  )
  .subscribe(finalMouseMoveEventInSquare => {});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...