Skip to content

Commit 4247a5e

Browse files
bennadelbennadel
committed
Add capture pointer events using bookmarklets demo.
1 parent 1191c01 commit 4247a5e

2 files changed

Lines changed: 63 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ with.
1010

1111
## My JavaScript Demos - I Love JavaScript!
1212

13+
* [Capturing Pointer Events Using Bookmarklets](https://bennadel.github.io/JavaScript-Demos/demos/capture-pointer-events/)
1314
* [Customizing A Select Component Using TemplateRef And NgTemplateOutlet In Angular 9.0.0-rc.3](https://bennadel.github.io/JavaScript-Demos/demos/html-dropdown-templates-angular9/dist/)
1415
* [Creating A Custom Select Component With The Options-Menu In The Root Stacking Context In Angular 9.0.0-rc.3](https://bennadel.github.io/JavaScript-Demos/demos/fixed-position-dropdown-menu-angular9/dist/)
1516
* [Having Fun With Position: Fixed And Element.getBoundingClientRect() In Angular 9.0.0-rc.2](https://bennadel.github.io/JavaScript-Demos/demos/celebrate-get-bounding-client-rect-angular9/dist/)

‎demos/capture-pointer-events/index.htm‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
2+
<!doctype html>
3+
<html>
4+
<head>
5+
<meta charset="utf-8" />
6+
7+
<title>
8+
Capturing Pointer Events Using Bookmarklets
9+
</title>
10+
11+
<style type="text/css">
12+
13+
.popup {
14+
/*
15+
CAUTION: Because this class turns OFF pointer-events, the user won't be
16+
able to right-click and Inspect the element. This can make debugging much
17+
more difficult.
18+
*/
19+
pointer-events: none ;
20+
/* --- */
21+
background-color: #f0f0f0 ;
22+
border: 1px solid #cccccc ;
23+
border-radius: 5px 5px 5px 5px ;
24+
left: 50% ;
25+
padding: 10px 15px 10px 15px ;
26+
position: fixed ;
27+
top: 50% ;
28+
transform: translateX( -50% ) translateY( -50% ) ;
29+
}
30+
31+
</style>
32+
</head>
33+
<body>
34+
35+
<h1>
36+
Capturing Pointer Events Using Bookmarklets
37+
</h1>
38+
39+
<p>
40+
<!-- Copied from: https://github.com/bennadel/Bookmarklets -->
41+
<a href='javascript:(function(d,b,f,u,s){f="capture-pointer-events.js";u=(b+f+"?="+Date.now());s=d.createElement("script");s.setAttribute("src",u);d.body.appendChild(s);})(document,"https://bennadel.github.io/Bookmarklets/");void(0);'>
42+
<strong>Bookmarklet</strong>: Capture Pointer Events
43+
</a>
44+
</p>
45+
46+
<!-- Lots of nested element to represent a complex DOM tree structure. -->
47+
<div>
48+
<div>
49+
<div>
50+
<div>
51+
<div>
52+
<span class="popup">
53+
Try to <strong>Inspect</strong> me!
54+
</span>
55+
</div>
56+
</div>
57+
</div>
58+
</div>
59+
</div>
60+
61+
</body>
62+
</html>

0 commit comments

Comments
 (0)