blob: 84fddce613f245814bd40a074e93d97f5e1fc69e [file] [log] [blame]
<!DOCTYPE html>
<!--
| Pointer events demo web page.
| Can be used to verify that pointer events are generated and passed into the
| correct DOM elements.
-->
<html class="html">
<head class="head">
<style>
body {
margin: 20px;
background-color: #0000FF;
font-size: 20px;
font-family: Roboto;
}
.padded {
padding: 20px;
transition: border-left-color 1s linear, border-top-color 1s linear, outline-width 1s linear, outline-color 1s linear;
background-clip: padding-box;
}
.top {
transform-no: rotate(-45deg);
display: inline-block;
}
.outer {
background-color: #484;
border: solid rgba(0, 0, 0, 0) 10px;
outline: solid #00C0F0 5px;
}
.outer:hover {
background-color: #848;
border: solid white 10px;
outline: solid #FF4000 20px;
}
.inner {
animation: blink 1.1s infinite;
background-color: #8F8;
outline: solid rgba(0, 0, 0, 1) 0px;
}
.inner:hover {
background-color: #F8F;
outline: solid rgba(160, 160, 255, 0) 40px;
}
.leftswap {
position:relative;
left:+185px;
top:0px;
}
.rightswap {
position:relative;
left:-185px;
top:0px;
}
.pointereventsnone {
pointer-events:none;
}
.pointereventsauto {
pointer-events:auto;
}
</style>
<script>
function phasename(phase) {
switch(phase) {
case 0: return ' [none]';
case 1: return ' [capturing]';
case 2: return ' [at target]';
case 3: return ' [bubbling]';
}
return ' [unknown: ' + phase + ']';
}
function sethandlers(event, classname, callback) {
var elements = document.getElementsByClassName(classname);
for (var i = 0; i < elements.length; ++i) {
elements[i].addEventListener(event, callback);
}
}
function setfocus(classname) {
var elements = document.getElementsByClassName(classname);
for (var i = 0; i < elements.length; ++i) {
console.log('Setting focus \"' + elements[i].className + '\"');
elements[i].focus();
}
}
function log_event(e) {
var pointertype = e.pointerType ? e.pointerType + ' ' : '';
var id = this.getAttribute('id') ?
'id=\'' + this.getAttribute('id') + '\' ' : '';
console.log(e.type + ' ' + pointertype +
id + '(' +
this.getAttribute('class') + ') ' +
phasename(e.eventPhase) +
' (' + e.screenX + ',' + e.screenY + ')');
}
function cancel(e) {
console.log('cancel');
e.preventDefault();
}
function stop(e) {
console.log('stop');
e.stopPropagation();
}
function capture(e) {
console.log('capture');
e.target.setPointerCapture(e.pointerId);
}
function setallhandlers(prefix, classname, callback) {
sethandlers(prefix + 'enter', classname, callback);
sethandlers(prefix + 'leave', classname, callback);
sethandlers(prefix + 'over', classname, callback);
sethandlers(prefix + 'out', classname, callback);
sethandlers(prefix + 'down', classname, callback);
sethandlers(prefix + 'up', classname, callback);
sethandlers(prefix + 'move', classname, callback);
}
window.onload = function() {
setallhandlers('mouse', 'log', log_event);
setallhandlers('pointer', 'log', log_event);
setallhandlers('mouse', 'cancel', cancel);
setallhandlers('pointer', 'cancel', cancel);
setallhandlers('mouse', 'stop', stop);
setallhandlers('pointer', 'stop', stop);
sethandlers('pointerdown', 'capture', capture);
setfocus('focus');
document.addEventListener("keydown", e => {
console.log('Do something on keydown');
});
var links = document.getElementsByClassName("clickhere");
for (var i = 0; i < links.length; i++) {
links[i].addEventListener("click", function(e) {
console.log('Click received at (' + e.screenX + ',' + e.screenY +
') on \"' + e.target.innerHTML + '\" during ' +
phasename(e.eventPhase));
});
}
}
</script>
</head>
<body class="body">
<div class="topdiv">
<span id="top-left" class="top log pointereventsnone clickhere">
<div class="outer padded log pointereventsnone">
<div class="inner padded one log pointereventsauto clickhere">One</div>
<div class="inner padded two log capture stop cancel focus pointereventsauto clickhere" tabindex='0'>Two</div>
<div class="inner padded three log stop pointereventsauto clickhere" tabindex='1'>Three</div>
<div class="padded four log pointereventsauto clickhere">Four</div>
<div class="inner padded five offsetx log pointereventsauto">Five offset x</div>
<div class="inner padded six offsety log pointereventsauto">Six offset y</div>
<div class="padded seven log pointereventsauto">Seven</div>
<div class="inner padded eight log pointereventsauto">Eight</div>
<div class="padded nine log pointereventsauto">Nine</div>
<div class="inner padded leftswap log pointereventsauto">LeftSwap</div>
</div>
</span>
<span id="top-divider" class="top" style="width:50px;"></span>
<span id="top-right" class="top events">
<div class="outer padded events">
<div class="inner padded one events clickhere">One</div>
<div class="inner padded two events clickhere">Two</div>
<div class="inner padded three events clickhere">Three</div>
<div class="padded four events clickhere">Four</div>
<div class="inner padded five offsetx events">Five offset x</div>
<div class="inner padded six offsety events">Six offset y</div>
<div class="padded seven events">Seven</div>
<div class="inner padded eight events">Eight</div>
<div class="padded nine events">Nine</div>
<div class="inner padded rightswap events">RightSwap</div>
</div>
</span>
</div>
</body>
</html>