Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: gh-pages
executable file 155 lines (145 sloc) 3.938 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,user-scalable=no">
    <title>Event listener with user-scalable=no</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 {
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 user-scalable=no</h1>
<p>Page with <code>user-scalable=no</code>.</p>
<button class="button">Touch/hover/focus me!</button>
<output></output>

  </body>
</html>
Something went wrong with that request. Please try again.