tilomitra · October 16, 2012 18:46
diff --git a/gistfile1.txt b/gistfile1.txt
 <!DOCTYPE html>
 <html>
    <head>
        <style>
            #square {
                width:200px;
                height:200px;
                background: yellow;
                border:3px solid black;
                position: relative;
                -ms-touch-action: auto;
            }

        </style>
    </head>

    <body>

        <div id="square">I have -ms-touch-action:auto with preventDefault()</div>
        <h1>Here's some text just so the page scrolls.</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus facilisis magna vitae placerat. Duis euismod tellus vitae dui condimentum dapibus. Mauris cursus ornare accumsan. Nunc viverra felis vel mauris interdum non vehicula quam viverra. Nam at accumsan tellus. Donec neque diam, commodo eget rhoncus vestibulum, auctor sit amet libero. Proin sodales arcu sit amet dui bibendum dapibus. Suspendisse pharetra, nibh ac pulvinar tristique, justo risus fringilla eros, vel ultricies massa ligula id leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi tempor erat non sem aliquam interdum. Nunc tristique ullamcorper tempus. Cras sit amet lacus a justo eleifend molestie vel a magna. Nulla luctus placerat dui, sed sagittis orci posuere non. Donec a purus eget nunc auctor condimentum. Cras feugiat nunc quis arcu dictum nec sollicitudin ligula gravida.</p>

        <p>Sed lectus tellus, vulputate non ultricies sed, semper eget ipsum. Sed id eros eu elit semper condimentum. Ut condimentum adipiscing eros id varius. Vivamus feugiat adipiscing mauris, at lobortis nulla feugiat at. Aenean nibh mauris, pellentesque eu vulputate sed, consectetur eu justo. Etiam placerat posuere pellentesque. Pellentesque ultricies iaculis lorem vitae condimentum. Nam auctor, elit non aliquam interdum, arcu dolor vulputate libero, et mattis justo ante ac libero. Etiam eu sagittis mauris. Proin cursus scelerisque mi, in aliquam nisi eleifend ut. Nullam ut arcu ut ipsum euismod tempus. Aliquam sem metus, varius eget consectetur sit amet, molestie et dolor. Nunc gravida malesuada tellus, ut iaculis nisl pharetra eget.</p>

        <p>Suspendisse interdum dignissim rhoncus. Aliquam erat volutpat. Etiam porttitor, dolor sed imperdiet auctor, purus sapien placerat ipsum, ut pretium justo arcu ac ante. In aliquam fringilla lacus, non pulvinar ante eleifend sed. Fusce malesuada enim at nunc tincidunt elementum. Pellentesque a augue sit amet diam aliquam pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam ut quam mauris, vitae lobortis nunc. Ut quis fringilla nisi. Donec dictum semper mi, in gravida ipsum ultricies ut. Nulla auctor lorem a erat suscipit accumsan. Fusce vitae adipiscing nisl. Donec et lectus lacus, quis ullamcorper justo. Mauris id leo augue.</p>


        <script>
            var square = document.getElementById('square');
            square.addEventListener('MSPointerDown', function (e) {
                e.preventDefault();
                square.style.background = 'green';
            });

            document.addEventListener('MSPointerMove', function (e) {
                e.preventDefault();
                square.style.top = e.clientY + 'px';
                square.style.left = e.clientX + 'px';
            });

            document.addEventListener('MSPointerUp', function (e) {
                e.preventDefault();
                square.style.background = 'yellow';
            });

        </script>
    </body>

 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	#square {
	width:200px;
	height:200px;
	background: yellow;
	border:3px solid black;
	position: relative;
	-ms-touch-action: auto;
	}

	</style>
	</head>

	<body>

	<div id="square">I have -ms-touch-action:auto with preventDefault()</div>
	<h1>Here's some text just so the page scrolls.</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus facilisis magna vitae placerat. Duis euismod tellus vitae dui condimentum dapibus. Mauris cursus ornare accumsan. Nunc viverra felis vel mauris interdum non vehicula quam viverra. Nam at accumsan tellus. Donec neque diam, commodo eget rhoncus vestibulum, auctor sit amet libero. Proin sodales arcu sit amet dui bibendum dapibus. Suspendisse pharetra, nibh ac pulvinar tristique, justo risus fringilla eros, vel ultricies massa ligula id leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi tempor erat non sem aliquam interdum. Nunc tristique ullamcorper tempus. Cras sit amet lacus a justo eleifend molestie vel a magna. Nulla luctus placerat dui, sed sagittis orci posuere non. Donec a purus eget nunc auctor condimentum. Cras feugiat nunc quis arcu dictum nec sollicitudin ligula gravida.</p>

	<p>Sed lectus tellus, vulputate non ultricies sed, semper eget ipsum. Sed id eros eu elit semper condimentum. Ut condimentum adipiscing eros id varius. Vivamus feugiat adipiscing mauris, at lobortis nulla feugiat at. Aenean nibh mauris, pellentesque eu vulputate sed, consectetur eu justo. Etiam placerat posuere pellentesque. Pellentesque ultricies iaculis lorem vitae condimentum. Nam auctor, elit non aliquam interdum, arcu dolor vulputate libero, et mattis justo ante ac libero. Etiam eu sagittis mauris. Proin cursus scelerisque mi, in aliquam nisi eleifend ut. Nullam ut arcu ut ipsum euismod tempus. Aliquam sem metus, varius eget consectetur sit amet, molestie et dolor. Nunc gravida malesuada tellus, ut iaculis nisl pharetra eget.</p>

	<p>Suspendisse interdum dignissim rhoncus. Aliquam erat volutpat. Etiam porttitor, dolor sed imperdiet auctor, purus sapien placerat ipsum, ut pretium justo arcu ac ante. In aliquam fringilla lacus, non pulvinar ante eleifend sed. Fusce malesuada enim at nunc tincidunt elementum. Pellentesque a augue sit amet diam aliquam pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam ut quam mauris, vitae lobortis nunc. Ut quis fringilla nisi. Donec dictum semper mi, in gravida ipsum ultricies ut. Nulla auctor lorem a erat suscipit accumsan. Fusce vitae adipiscing nisl. Donec et lectus lacus, quis ullamcorper justo. Mauris id leo augue.</p>


	<script>
	var square = document.getElementById('square');
	square.addEventListener('MSPointerDown', function (e) {
	e.preventDefault();
	square.style.background = 'green';
	});

	document.addEventListener('MSPointerMove', function (e) {
	e.preventDefault();
	square.style.top = e.clientY + 'px';
	square.style.left = e.clientX + 'px';
	});

	document.addEventListener('MSPointerUp', function (e) {
	e.preventDefault();
	square.style.background = 'yellow';
	});

	</script>
	</body>

	</html>