带条件的 RxJs mousemove 事件
[英]RxJs mousemove event with condition
问题描述
我正在为此苦苦挣扎，我不知道如何继续。 我只想在用户停止使用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 个解决方案
解决方案1
2 已采纳 2018-09-26 07:58:43
因此，如果我正确理解您的问题，您想：
因此，根据性能，您可以始终事件 mousemove 或仅在使用.switchMap()运算符进入方块后才启动 mousemove 事件：
enter$
.switchMap(_ => $moves
.debounceTime(2000)
.takeUntil(leave$)
)
.subscribe(finalMouseMoveEventInSquare => {});
解决方案2
0 2018-09-26 08:14:54
您遇到的问题是最后一个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操作符是必要的，否则一旦鼠标第一次离开方块，当鼠标下一次进入方块时，observable 将不会重复。 如果您的预期行为是让 observable 在鼠标第一次离开方块后停止发射，请随意删除重复操作符。 希望能帮到你，有什么问题可以私信我！
切换mousemove mousestop事件
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.