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
|
<!DOCTYPE html>
<html>
<head>
<title>Clicks Demo</title>
<script type="text/javascript">
window.clicksWsUrl = "ws://127.0.0.1:8001"
</script>
<script type="text/javascript" src="../build/clicks.min.js"></script>
<script type="text/javascript">
function onLink() {
alert('Link clicked');
return false;
}
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('button').addEventListener('click', (e) => {
e.preventDefault();
alert('Button clicked');
});
});
</script>
</head>
<body>
<h1>Clicks Demo</h1>
<h2>Clickable elements that don't propegate</h2>
<p>
<a href="#" onclick="onLink()">Link</a><br>
<br>
<button id="button">Button</button>
</p>
<h2>Long text for scrolling</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id lorem eu sapien dignissim malesuada sit amet et enim. Cras vel ultrices massa, eget imperdiet lectus. Etiam euismod in nisi vel maximus. Sed consectetur convallis sodales. Ut volutpat eleifend libero vel sodales. Duis consectetur justo facilisis pulvinar ultrices. Nulla malesuada lacus et aliquet elementum. Etiam gravida ultrices justo. Aenean dictum dui ut aliquam rutrum. Ut ullamcorper ornare suscipit. Mauris tincidunt eget arcu at tempor. Pellentesque quis ullamcorper elit. Pellentesque maximus imperdiet felis at tempor. Etiam pellentesque ligula a quam vestibulum, eu lacinia augue dictum. Sed sapien orci, dignissim et sem non, fermentum luctus est.</p>
<p>Nullam faucibus at felis nec gravida. Sed semper ex vel leo vestibulum, eget ornare sapien ullamcorper. Pellentesque et eros ex. Donec scelerisque dapibus diam ut vehicula. Praesent felis odio, tristique id iaculis eu, accumsan et ipsum. Nulla facilisi. Nullam a facilisis lorem. Nam ullamcorper convallis orci, id tincidunt nunc. Proin iaculis, purus eu rhoncus scelerisque, nisl purus laoreet tellus, vel eleifend turpis leo vulputate sapien. Ut sed aliquam risus. Nullam ac augue leo. Curabitur justo ligula, sagittis sed tincidunt et, gravida efficitur ipsum. Nam id venenatis libero, sed convallis quam. Sed placerat, quam ut porta pretium, tellus quam laoreet libero, sed accumsan erat purus et felis. Aliquam facilisis congue odio at condimentum. Aenean ligula est, fermentum nec metus non, dapibus molestie est.</p>
<p>Phasellus non est feugiat enim venenatis mattis vel quis nunc. Maecenas semper lorem pharetra mi ullamcorper, vel molestie tortor venenatis. Morbi aliquet arcu et risus fermentum congue. Donec quis velit sit amet velit condimentum aliquet sed et enim. Vestibulum ultricies ipsum vel consequat porttitor. Praesent iaculis leo ut varius blandit. Sed ac fermentum libero. Integer varius orci eu dignissim porttitor. Suspendisse at tellus mattis erat congue efficitur sit amet non ex. Sed laoreet ligula lobortis metus facilisis, commodo egestas odio feugiat. Donec at commodo odio.</p>
<p>Suspendisse sed elementum sapien, eu finibus orci. Ut ut velit non tortor finibus luctus ut ac mauris. Integer finibus mauris sit amet felis aliquet commodo. Vivamus id aliquet nunc. Phasellus id ligula at ligula euismod egestas quis eget dolor. Sed id est quis purus viverra iaculis sit amet ac velit. Vestibulum at euismod velit. Cras ullamcorper pretium semper. Sed eros orci, fermentum nec lectus sit amet, aliquam condimentum sapien. Cras id eleifend odio. Sed efficitur nibh commodo, rhoncus est nec, molestie sapien. Praesent commodo faucibus dui sed maximus. Suspendisse volutpat tristique metus, feugiat convallis tellus.</p>
<p>Donec dapibus orci ut neque lacinia, eget mollis nisl imperdiet. Donec a posuere diam. Suspendisse faucibus tempor quam id blandit. In sed neque sodales, dapibus massa accumsan, vehicula elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt porta egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>
|
