Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html>
    <body>
        <div id="div1" style="width:800px;height:250px;background:green"></div>
        <div id="div2" style="width:800px;height:250px;background:yellow"></div>
        <script>
            var div1 = document.getElementById("div1");
            var div2 = document.getElementById("div2");
            div1.addEventListener("pointerdown", (e) => {
                div2.setPointerCapture(e.pointerId);
                div1.requestPointerLock();
            }, false);
            var pointer_events = ["pointerup", "pointerdown", "gotpointercapture", "lostpointercapture", "pointermove", "mousemove", "mousedown", "mouseup"];
​
            pointer_events.forEach((element) => {
                div1.addEventListener(element, (e) => {
                    div1.innerHTML = element + "\n" + div1.innerHTML;
                    if (e.type == "mouseup") {
                        document.exitPointerLock();
                    }
                }, false);
                div2.addEventListener(element, (e) => {
                    div2.innerHTML = element + "\n" + div2.innerHTML;
                    if (e.type == "pointerup") {
                        div2.releasePointerCapture(e.pointerId);
                    }
                }, false);                
            });
        </script>
    </body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
mingchoupro
0viewers