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>
<style>
div.box {
  margin: 5px;
  padding: 100px;
  float: left;
}
</style>
​
<body>
1. Move mouse onto green div and press the left key. <br/>
2. Move the mouse a little bit in the green box (until you get more than ~10 pointermove) until the pointer capture is set to blue div. <br/>
3. Move the mouse a little more until blue gets at least one pointer move. <br/>
​
<div id="green" class="box" style="background-color:green;">
</div>
<div id="blue" class="box" style="background-color:blue;">
</div>
​
<div id="console"></div>
​
<script>
​
var seqNo = 0;
var captureIsSet = false;
var pointerMoveCount = 0;
​
function debug(str) {
  document.getElementById('console').innerHTML += str + "<br>";
}
  
  var eventList = ["pointerenter", "pointerleave", "pointerover", "pointerout", "pointermove", "pointerdown", "pointerup", "gotpointercapture", "lostpointercapture"];
​
  ["green", "blue"].forEach(function(id) {
    var targetDiv = document.getElementById(id);
    eventList.forEach(function(eventName) {
      targetDiv.addEventListener(eventName, function(event) {
        if (event.eventPhase == Event.AT_TARGET) {
          debug(++seqNo + " " + id + " received " + event.type+ " " + event.pointerId);
          if (id == "green" && event.type == "pointerdown") {
            debug(" ======= Set Pointer Capture  ======= ");
            document.getElementById("green").setPointerCapture(event.pointerId);
            captureIsSet = true;
          }
          if (captureIsSet && id == "green" && event.type == "pointermove") {
            if (pointerMoveCount++ > 10) {
              debug(" ======= Re-set Pointer Capture  ======= ");
              document.getElementById('blue').setPointerCapture(event.pointerId);
            }
          }
        }
      });
    });
​
  });
​
</script>
</body>
Output

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

Dismiss x