├── index.html
└── script.js
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
9 |
23 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | const evilButton = document.getElementById('evil-button')
2 | const OFFSET = 100
3 |
4 | evilButton.addEventListener('click', () => {
5 | alert('Nice Try')
6 | window.close()
7 | })
8 |
9 | document.addEventListener('mousemove', (e) => {
10 | const x = e.pageX
11 | const y = e.pageY
12 | const buttonBox = evilButton.getBoundingClientRect()
13 | const horizontalDistanceFrom = distanceFromCenter(buttonBox.x, x, buttonBox.width)
14 | const verticalDistanceFrom = distanceFromCenter(buttonBox.y, y, buttonBox.height)
15 | const horizontalOffset = buttonBox.width / 2 + OFFSET
16 | const verticalOffset = buttonBox.height / 2 + OFFSET
17 | if (Math.abs(horizontalDistanceFrom) <= horizontalOffset && Math.abs(verticalDistanceFrom) <= verticalOffset) {
18 | setButtonPosition(
19 | buttonBox.x + horizontalOffset / horizontalDistanceFrom * 10,
20 | buttonBox.y + verticalOffset / verticalDistanceFrom * 10
21 | )
22 | }
23 | })
24 |
25 | function setButtonPosition(left, top) {
26 | const windowBox = document.body.getBoundingClientRect()
27 | const buttonBox = evilButton.getBoundingClientRect()
28 |
29 | if(distanceFromCenter(left, windowBox.left, buttonBox.width) < 0) {
30 | left = windowBox.right - buttonBox.width - OFFSET
31 | }
32 | if(distanceFromCenter(left, windowBox.right, buttonBox.width) > 0) {
33 | left = windowBox.left + OFFSET
34 | }
35 | if(distanceFromCenter(top, windowBox.top, buttonBox.height) < 0) {
36 | top = windowBox.bottom - buttonBox.height - OFFSET
37 | }
38 | if(distanceFromCenter(top, windowBox.bottom, buttonBox.height) > 0) {
39 | top = windowBox.top + OFFSET
40 | }
41 |
42 | evilButton.style.left = `${left}px`
43 | evilButton.style.top = `${top}px`
44 | }
45 |
46 | function distanceFromCenter(boxPosition, mousePosition, boxSize) {
47 | return boxPosition - mousePosition + boxSize / 2
48 | }
--------------------------------------------------------------------------------