-
Notifications
You must be signed in to change notification settings - Fork 2
/
demo.html
108 lines (97 loc) · 3.33 KB
/
demo.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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
<meta charset="utf-8">
<title>jQuery 'taphold' event demo</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="taphold.js"></script>
<style>
#link {
margin: 15px;
}
#buttons {
display: flex;
flex-wrap: wrap;
}
#buttons>div {
width: 95px;
height: 95px;
margin: 15px;
padding: 10px;
border-radius: 5px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
#log {
background: black;
color: silver;
min-height: 100px;
margin: 15px;
padding: 10px;
padding-top: 2px;
}
</style>
<script type="text/javascript">
function log (e, msg) {
console.log(e);
var target = e.currentTarget; // this
msg = typeof msg === 'string' && msg+' ' || '';
msg += e.type + ' on ' + target.nodeName;
if (target.id) { msg += '#'+target.id; }
if (target !== e.delegateTarget) { msg += ' (delegated)'; }
$('#log').prepend(msg + '\n');
}
var HUE = 'hsl(%HUE%, 100%, 50%)';
var START_HUE = Math.random()*360;
var NEXT_OFFSET = 57;
$(function () {
var $buttons = $('#buttons');
var id = 0;
var h = START_HUE;
function button (html, Class) {
id++;
h = (h+NEXT_OFFSET) % 360;
return $('<div>')
.css('background', HUE.replace('%HUE%', h))
.attr('id',id)
.addClass(Class)
.html(html)
.prepend('<code>'+id+'</code><br><br>')
.appendTo($buttons);
}
button('taphold click')
.on('taphold click', log);
button('click taphold (delay: 0.9s)')
.on('click taphold', {delay: 900}, log);
button('taphold (delay: 2s)')
.on('taphold', {delay: 2000}, log);
button('taphold click (delegated)','delegated');
$buttons.on('taphold click', '.delegated', log);
button('taphold click (several)')
.on('taphold click taphold click', log);
$('#link').on('click taphold', log);
$('#log')
.on('taphold', function () {$(this).empty();})
.on('click', log);
var menu = false;
$('body').on('click', function (e) {
if (e.detail === 3) {
menu = !menu;
var action = menu ? 'on' : 'off';
$('#log').prepend('listen contextmenu: ' + action + '\n');
$('body')[action]('contextmenu', log);
}
});
});
</script>
</head>
<body>
<div id="link" title="taphold prevents default">
<a href="https://github.com/IITC-CE/jquery-taphold/blob/master/demo.html">Source</a>
</div>
<div id="buttons"></div>
<pre id="log" title="taphold to clear"></pre>
</body>
</html>