Observable from mouse events
import {Observable} from "rxjs";
let circle = document.getElementById("circle");
let source = Observable.fromEvent(document,"mousemove")
.map((e:MouseEvent)=>
{
return {
x:e.clientX,
y:e.clientY
};
})
.filter(value=>value.x<500)
.delay(300);
function onNext(value){
circle.style.left = `${value.x}px`;
circle.style.top = `${value.y}px`;
console.log(circle.style.left);
}
source.subscribe(
onNext,
e=>console.log(`error: ${e}`),
()=>console.log("complete")
);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
#circle{
width: 20px;
height: 20px;
border-radius: 50%;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div id="circle"></div>
<script src="app.js"></script>
</body>
</html>