Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: gh-pages
Fetching contributors…

Cannot retrieve contributors at this time

executable file 160 lines (148 sloc) 4.018 kb
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Event listener with touch-action:none</title>
<link rel="stylesheet" type="text/css" href="../media/css/front.css">
<style>
/* override front.css body width */
body { width: auto; }
code {
margin: 0 2px;
padding: 0px 5px;
border: 1px solid #eaeaea;
background-color: #f8f8f8;
border-radius: 3px;
}
output {
display: block;
padding: 1em;
font-size: 0.75em;
background: #ddd;
height: 20em;
overflow:auto;
}
output strong {
color: #f00;
text-decoration: underline;
}
button {
/* Pointer Event default suppression */
-ms-touch-action: none;
touch-action: none;
width: 100%;
height: 4rem;
margin: 0 0 1rem;
padding: 0.15rem 1.5rem;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
vertical-align: middle;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
background: #ddd;
background: -moz-linear-gradient(top, #eee 0%, #bbb 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eee), color-stop(100%,#bbb));
background: -webkit-linear-gradient(top, #eee 0%,#bbb 100%);
background: -o-linear-gradient(top, #eee 0%,#bbb 100%);
background: -ms-linear-gradient(top, #eee 0%,#bbb 100%);
background: linear-gradient(to bottom, #eee 0%,#bbb 100%);
border: 0.1rem solid #a6a6a6;
border-radius: 0.2rem;
font: 1.6rem/3.8rem Arial, Sans-serif;
color: #333;
text-align: center;
text-shadow: 0.1rem 0.1rem 0 rgba(255,255,255,0.3);
text-decoration: none;
outline: none;
}
button:focus, button:hover {
border: 0.2rem solid #008aaa;
padding: 0 1.5rem;
}
button:active {
border-color: #008aaa;
background: #008aaa;
background: -moz-linear-gradient(top, #008aaa 0%, #00c7ea 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#008aaa), color-stop(100%,#00c7ea));
background: -webkit-linear-gradient(top, #008aaa 0%,#00c7ea 100%);
background: -o-linear-gradient(top, #008aaa 0%,#00c7ea 100%);
background: -ms-linear-gradient(top, #008aaa 0%,#00c7ea 100%);
background: linear-gradient(to bottom, #008aaa 0%,#00c7ea 100%);
color: #333;
}
button::-moz-focus-inner {
border: none;
outline: none;
}
</style>
<script>
window.addEventListener('load', function() {
var t = 0;
var events = [
'MSPointerDown',
'MSPointerUp',
'MSPointerCancel',
'MSPointerMove',
'MSPointerOver',
'MSPointerOut',
'MSGotPointerCapture',
'MSLostPointerCapture',
'pointerdown',
'pointerup',
'pointercancel',
'pointermove',
'pointerover',
'pointerout',
'gotpointercapture',
'lostpointercapture',
'touchstart',
'touchmove',
'touchend',
'touchenter',
'touchleave',
'mouseover',
'mousemove',
'mouseout',
'mousedown',
'mouseup',
'focus',
'blur',
'click'
];
var b = document.getElementsByTagName('button')[0];
var o = document.getElementsByTagName('output')[0],
report = function(e) {
/* Hack - would normally use e.timeStamp but it's whack in Fx/Android
As a result, the timings will be slightly inflated due to processing*/
var now = new Date().getTime();
var delta = now-t;
o.innerHTML += e.type;
if (t>0) {
if ((now-t)>150) {
o.innerHTML += ' (<strong>' + (delta) + 'ms</strong>)';
} else {
o.innerHTML += ' (' + (delta) + 'ms)';
}
}
t=now;
o.innerHTML += '<br>';
if (e.type == 'click') {
t=0;
}
}
for (var i=0; i<events.length; i++) {
b.addEventListener(events[i], report, false);
}
}, false);
</script>
</head>
<body>
<h1>Event listener with touch-action:none</h1>
<p>Page with <code>touch-action: none;</code>.</p>
<button class="button">Touch/hover/focus me!</button>
<output></output>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.