<commit_before><!DOCTYPE html>
<html><head><meta charset=utf-8>
<title>Pointer Events - setPointerCapture</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css">
<style>
button { touch-action:none; font-size: 1em;}
</style>
<script>


window.addEventListener('load', function() {
	var n = document.getElementById('nocapture');
	var c = document.getElementById('capture');
	var njt = document.getElementById('nocapture-just-touch');

	var report = function(e) {
		if (e.offsetX) {
			e.target.innerHTML = 'x: '+Math.floor(e.offsetX)+' y: '+Math.floor(e.offsetY);
		} else if (e.targetTouches) {
			e.target.innerHTML = 'x: '+Math.floor(e.targetTouches[0].clientX)+' y: '+Math.floor(e.targetTouches[0].clientY);
		}
		e.preventDefault();
	}


	n.addEventListener('touchstart',report, false);
	n.addEventListener('touchmove',report, false);
	c.addEventListener('touchstart',report, false);
	c.addEventListener('touchmove',report, false);
	njt.addEventListener('touchstart',report, false);
	njt.addEventListener('touchmove',report, false);

	n.addEventListener('MSPointerDown', report, false);
	n.addEventListener('MSPointerMove', report, false);

	n.addEventListener('pointerdown', report, false);
	n.addEventListener('pointermove', report, false);

	c.addEventListener('MSPointerDown', function(e) { if (!e.target.pointer) { e.target.pointer = e.pointerId; report(e); if (this.setPointerCapture) { this.setPointerCapture(e.pointerId); }  else if (this.msSetPointerCapture) { this.msSetPointerCapture(e.pointerId); } } }, false);
	c.addEventListener('MSPointerUp', function(e) { if (e.pointerId == e.target.pointer) { e.target.pointer = false; } }, false);
	c.addEventListener('MSPointerCancel', function(e) { if (e.pointerId == e.target.pointer) { e.target.pointer = false; } }, false);
	c.addEventListener('MSPointerMove', report, false);

	c.addEventListener('pointerdown', function(e) { if (!e.target.pointer) { e.target.pointer = e.pointerId; report(e); if (this.setPointerCapture) { this.setPointerCapture(e.pointerId); }  else if (this.msSetPointerCapture) { this.msSetPointerCapture(e.pointerId); } } } , false);
	c.addEventListener('pointerup', function(e) { if (e.pointerId == e.target.pointer) { e.target.pointer = false; } }, false);
	c.addEventListener('pointercancel', function(e) { if (e.pointerId == e.target.pointer) { e.target.pointer = false; } }, false);
	c.addEventListener('pointermove', report, false);


}, false);
</script>
</head><body>
<h1><code>setPointerCapture</code></h1>
<p>This test requires either Touch Events or Pointer Events, and illustrates the difference between the implicit and explicit capture in those event models.</p>
<p>For both buttons, <code>pointermove</code> and <code>touchmove</code> events fired on the element update the X/Y coordinates. The difference shows when you tap/click on the buttons and then move your finger/stylus/mouse outside of the element: with Touch Events and their implicit capture model expressed through <code>targetTouches</code>, the coordinates are still tracked, while by default Pointer Events cease to fire as soon as the pointer leaves the boundaries of the element, unless you use <code>setPointerCapture</code>.</p>
<p>First, a button without <code>setPointerCapture</code>.</p>
<button id="nocapture">Tap/click and move!</button>
<p>The following button includes extra code to explicitly <code>setPointerCapture</code> on <code>pointerdown</code>. Pointer events are now fired even after pointer leaves the element, as long as the pointer is still down.</p>
<button id="capture">Tap/click and move!</button>
<p>Interestingly, starting with IE11 on Windows Phone 8.1 Update 1 (Preview for Developers), IE on mobile will support both Touch Events and Pointer Events. Testing the first button (without explicit <code>setPointerCapture</code>) initially made me think that the implicit capture that's a feature of Touch Events was not supported. However, it turns out that this is determined by the event listeners that are being registered - in the above two buttons, I register <strong>both</strong> touch and pointer listeners, and this requires explicit <code>setPointerCapture</code>. But if we <strong>just</strong> register Touch Events, the implicit capture works just fine.</p>
<button id="nocapture-just-touch">Tap/click and move!</button>
</body></html><commit_msg>Redo pointer capture demo<commit_after><!DOCTYPE html>
<html><head><meta charset=utf-8>
<title>Pointer Events - setPointerCapture</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css">
<style>
button { touch-action:none; font-size: 1em;}
</style>
</head>
<body>
<h1>Pointer capture</h1>
<p>This test requires either Touch Events or Pointer Events, and illustrates the difference between the implicit and explicit capture in those event models.</p>

<h2>Regular <code>&lt;button&gt;</code></h2>
<button id="nocapture">Tap/click and move!</button>
<p>With Touch Events and their implicit capture model (expressed through <code>targetTouches</code>), the coordinates are still tracked even after a touch moves outside of the button, while by default Pointer Events cease to fire as soon as the pointer leaves the boundaries of the element.</p>

<h2><code>&lt;button&gt;</code> with <code>setPointerCapture</code></h2>
<button id="capture">Tap/click and move!</button>
<p>With Touch Events, the behavior here remains the same. However, if for Pointer Events we explicitly <code>setPointerCapture</code> on <code>pointerdown</code>.</p>

<pre><code>foo.addEventListener('pointerdown', function(e) {
  ...
  this.setPointerCapture(e.pointerId);
  ...
} , false);</code></pre>

<p>Pointer events are now fired even after pointer leaves the element, as long as the pointer is active.</p>
</body>
<script>
var n = document.getElementById('nocapture');
var c = document.getElementById('capture');

var report = function(e) {
	if (e.offsetX) {
		e.target.innerHTML = 'x: '+Math.floor(e.offsetX)+' y: '+Math.floor(e.offsetY);
	} else if (e.targetTouches) {
		e.target.innerHTML = 'x: '+Math.floor(e.targetTouches[0].clientX)+' y: '+Math.floor(e.targetTouches[0].clientY);
	}
	e.preventDefault();
}

if ('onpointerdown' in window) {
	n.addEventListener('pointerdown', report, false);
	n.addEventListener('pointermove', report, false);
	c.addEventListener('pointerdown', function(e) {
		this.setPointerCapture(e.pointerId);
		report(e);
	} , false);
	c.addEventListener('pointermove', report, false);
} else {
	if ('ontouchstart' in window) {
        n.addEventListener('touchstart',report, false);
		n.addEventListener('touchmove',report, false);
		c.addEventListener('touchstart',report, false);
		c.addEventListener('touchmove',report, false);
	}
}
</script>
</html>
{'fraction_non_alphanumeric': 0.14630201440964563, 'fraction_numerical': 0.0030877812086457872, 'mean_word_length': 5.9266802443991855, 'pattern_counts': {'":': 0, '<': 111, '<?xml version=': 0, '>': 111, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 1, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7359714', 'n_tokens_mistral': 2040, 'n_tokens_neox': 1996, 'n_words': 589}