TOUCH-ACTION BUG

by CoolCmd

HTML

<p id=c1>
touch-action: none touch-action: none touch-action: none<br>
touch-action: none touch-action: none touch-action: none<br>
<a href="https://example.com">linklinklinklink</a>&emsp;<button>buttonbuttonbutton</button>&emsp;<img width=100 height=30 src="https://www.w3.org/2008/site/images/logo-w3c-mobile-lg"><br>
.<br>
.<br>
.<br>
.<br>
</p>

<p id=c2>
touch-action: none touch-action: none touch-action: none<br>
touch-action: none touch-action: none touch-action: none<br>
contextmnenu: preventDefault()<br>
<a href="https://example.com">linklinklinklink</a>&emsp;<button>buttonbuttonbutton</button>&emsp;<img width=100 height=30 src="https://www.w3.org/2008/site/images/logo-w3c-mobile-lg"><br>
.<br>
.<br>
.<br>
.<br>
</p>

<p id=c3>
touch-action: none touch-action: none touch-action: none<br>
touch-action: none touch-action: none touch-action: none<br>
touchstart: preventDefault()<br>
<a href="https://example.com">linklinklinklink</a>&emsp;<button>buttonbuttonbutton</button>&emsp;<img width=100 height=30 src="https://www.w3.org/2008/site/images/logo-w3c-mobile-lg"><br>
.<br>
.<br>
.<br>
.<br>
</p>

<pre id=log></pre>
<div class=note>double click the log to clear</div>

CSS

p
{
	height: 6em;
	overflow: auto;
	border: 1px solid gray;
	padding: 0 .5em;
	touch-action: none;
	-moz-user-select: none;
	-webkit-user-select: none;
}
#log
{
	max-height: 12em;
	overflow: auto;
	border: 1px solid gray;
	padding: 0 .5em;
}
.note
{
	font-size: 90%;
	color: gray;
}
a, button, img
{
	vertical-align: middle;
}

JavaScript

'use strict';

document.getElementById('c2').addEventListener('contextmenu', preventDefault);
document.getElementById('c3').addEventListener('touchstart', preventDefault, {passive: false});

function preventDefault(event)
{
	event.preventDefault();
}

//
// LOG
//

let logCount = 0;

for (let eventType of [
	'touchstart',
	'touchmove',
	'touchend',
	'touchcancel',
	'contextmenu',
	'click'
    ])
{
    window.addEventListener(eventType, logEvent, {capture: true});
}

function logEvent(event)
{
	if (event.target.id === 'log')
	{
		return;
	}
	++logCount;
	document.getElementById('log').insertAdjacentText('afterbegin', `${logCount} ${event.type}\n`);
}

document.getElementById('log').addEventListener('dblclick', event =>
{
	event.target.textContent = '';
});