forked from mounirlamouri/sandbox
-
Notifications
You must be signed in to change notification settings - Fork 0
/
x-origin-events.html
53 lines (51 loc) · 1.38 KB
/
x-origin-events.html
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
<!DOCTYPE html>
<html>
<head>
<title>x-origin iframes events</title>
<style>
#content {
border: solid red;
position: absolute;
height: 400px;
width: 400px;
z-index: 300;
background-color: rgba(255, 0, 0, .05);
}
#log {
border: dashed black;
}
</style>
</head>
<body>
<div id=content>
Mouse interaction are caught by this overlay which is on top of the page
</div>
<div>
<div>Below is a youtube embed</div>
<iframe id="ytplayer" type="text/html" width="640" height="360"
src="https://www.youtube.com/embed/zPHyxvPT0gg" frameborder="0"></iframe>
</div>
<div id=log></div>
</body>
<script>
// Return a DOM-compatible string describing the mouse event.
function mouseEventToString(e) {
console.log(e);
let r = "{<br>";
r += " type: " + e.type + "<br>";
r += " screenX: " + e.screenX + "<br>";
r += " screenY: " + e.screenY + "<br>";
r += " x: " + e.x + "<br>";
r += " y: " + e.y + "<br>";
return r + "}";
}
function printEvent(e) {
document.querySelector('#log').innerHTML = "<div>" + mouseEventToString(e) + "</div";
}
const content = document.querySelector('#content');
content.addEventListener('mousemove', e => printEvent(e));
content.addEventListener('mousedown', e => printEvent(e));
content.addEventListener('mouseup', e => printEvent(e));
content.addEventListener('mouseclick', e => printEvent(e));
</script>
</html>