Javascript 具有条件的RxJs mousemove事件_Javascript_Rxjs_Dom Events

Javascript 具有条件的RxJs mousemove事件

javascript rxjs

Javascript 具有条件的RxJs mousemove事件,javascript,rxjs,dom-events,Javascript,Rxjs,Dom Events,我正在努力解决这个问题，我不知道如何继续。我只想在用户停止使用mousemove一段时间并且它位于特定元素内时捕获鼠标事件 const{fromEvent}=rxjs； const{debounceTime，tap，filter}=rxjs.operators； const square=document.queryselectoral（“#square”）；让isCursorOverSquare=true； const move$=fromEvent（方形，“mousemove”）； co

我正在努力解决这个问题，我不知道如何继续。我只想在用户停止使用

mousemove

一段时间并且它位于特定元素内时捕获鼠标事件

const{fromEvent}=rxjs；
const{debounceTime，tap，filter}=rxjs.operators；
const square=document.queryselectoral（“#square”）；
让isCursorOverSquare=true；
const move$=fromEvent（方形，“mousemove”）；
const enter$=fromEvent（方形，鼠标指针）；
const leave$=fromEvent（方形，“mouseleave”）；
输入$.pipe(
点击（（）=>isCursorOverSquare=true）
).subscribe（）；
留下一根管子(
点击（（）=>isCursorOverSquare=false）
).subscribe（）；
移动$
.烟斗(
去BounceTime（2000年），
过滤器（（）=>isCursorOverSquare）
)
.订阅(
（e） =>{
console.log（如target）；
});
#正方形{
宽度：200px；
高度：200px；
显示：块；
边框：1px纯黑；
}
因此，如果我正确理解了您的问题，您希望：

跟踪所有鼠标移动（mousemove
event stream-）
移动停止一定时间后（）
验证它是否位于边界框（）内

因此，根据性能的不同，您可以始终激活mousemove，也可以仅在使用运算符进入正方形后启动mousemove事件：
enter$
  .switchMap(_ => $moves
    .debounceTime(2000)
    .takeUntil(leave$)
  )
  .subscribe(finalMouseMoveEventInSquare => {});

因此，如果我正确理解您的问题，您希望：

跟踪所有鼠标移动（mousemove
event stream-）
移动停止一定时间后（）
验证它是否位于边界框（）内

因此，根据性能的不同，您可以始终激活mousemove，也可以仅在使用运算符进入正方形后启动mousemove事件：
enter$
  .switchMap(_ => $moves
    .debounceTime(2000)
    .takeUntil(leave$)
  )
  .subscribe(finalMouseMoveEventInSquare => {});

您遇到的问题是，最后一个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>


#方格{
宽度：200px；
高度：200px；
显示：块；
边框：1px纯黑；
}
const{fromEvent}=rxjs；
const{debounceTime，repeat，takeUntil}=rxjs.operators；
const square=document.getElementById（“square”）；
const move$=fromEvent（方形，“mousemove”）.pipe（debounceTime（2000））；
const enter$=fromEvent（方形，鼠标指针）；
const leave$=fromEvent（方形，“mouseleave”）；
移动$.pipe（takeUntil（leave$），repeat（））.subscribe（（e）=>console.log（e.target））；

操作员是必要的，否则一旦鼠标第一次离开正方形，当鼠标下一次进入正方形时，观察对象将不会重复。如果您的预期行为是在鼠标第一次离开正方形后，可观察对象停止发射，请随意删除repeat操作符。希望这对你有帮助，如果你有任何问题，请告诉我
 您遇到的问题是，最后一个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>


#方格{
宽度：200px；
高度：200px；
显示：块；
边框：1px纯黑；
}
const{fromEvent}=rxjs；
const{debounceTime，repeat，takeUntil}=rxjs.operators；
const square=document.getElementById（“square”）；
const move$=fromEvent（方形，“mousemove”）.pipe（debounceTime（2000））；
const enter$=fromEvent（方形，鼠标指针）；
const leave$=fromEvent（方形，“mouseleave”）；
移动$.pipe（takeUntil（leave$），repeat（））.subscribe（（e）=>console.log（e.target））；

操作员是必要的，否则一旦鼠标第一次离开正方形，当鼠标下一次进入正方形时，观察对象将不会重复。如果您的预期行为是在鼠标第一次离开正方形后，可观察对象停止发射，请随意删除repeat操作符。希望这对你有帮助，如果你有任何问题，请告诉我
 谢谢马克，非常优雅的解决方案。谢谢马克，非常优雅的解决方案。