-
Notifications
You must be signed in to change notification settings - Fork 35
/
events.mouse.html
128 lines (119 loc) · 5.3 KB
/
events.mouse.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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Мышиные события</title>
<link rel="profile" href="https://gmpg.org/xfn/11"/>
<link rel="shortcut icon" href="https://anton.shevchuk.name/favicon.ico"/>
<link rel="stylesheet" href="css/styles.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
let sel = function (ev) {
/*if (ev.target != undefined) {
$('#element').html(ev.target.id);
}*/
let el = '#' + ev.type
let counter = $(el).find('span').html()
if (counter === '') counter = 0
$(el).find('span')
.html(++counter)
.css({ background: '#fe3456', color: '#ffffff' })
return false
}
// $('body').error(sel);
// $('body').load(sel);
$(function (ev) {
$('#box1').mousedown(sel)
.mouseup(sel)
.click(sel)
.dblclick(sel)
$('#box2')
.mouseenter(sel)
.mouseleave(sel)
$('#box3')
.mousemove(sel)
$('#box4')
.mouseout(sel)
.mouseover(sel)
// $('#box1 > div').mousemove(sel)
// $('#box2 > div').mousemove(sel)
// $('#box3 > div').mousemove(sel)
// $('#box4 > div').mousemove(sel)
sel(ev)
})
</script>
</head>
<body>
<header>
<h1>События мышки</h1>
<h2>Клики и передвижения</h2>
</header>
<main>
<article class="flex justify-center items-center">
<div class="grid grid-cols-2 gap-2">
<div id="box1" class="w-48 h-48 bg-orange-500 flex justify-center items-center cursor-pointer">
<div class="w-1/2 h-1/2 bg-white bg-opacity-50 p-0.5 flex justify-center items-center">click me! again! double click!</div>
</div>
<div id="box2" class="w-48 h-48 bg-lime-600 flex justify-center items-center cursor-move">
<div class="w-1/2 h-1/2 bg-white bg-opacity-50 p-0.5 flex justify-center items-center">move, move, move, move!</div>
</div>
<div id="box3" class="w-48 h-48 bg-sky-400 flex justify-center items-center cursor-move">
<div class="w-1/2 h-1/2 bg-white bg-opacity-50 p-0.5 flex justify-center items-center">move, move, move, move!</div>
</div>
<div id="box4" class="w-48 h-48 bg-yellow-400 flex justify-center items-center cursor-move">
<div class="w-1/2 h-1/2 bg-white bg-opacity-50 p-0.5 flex justify-center items-center">move, move, move, move!</div>
</div>
</div>
</article>
</main>
<footer>
© <a href="https://anton.shevchuk.name/jquery-book/">jQuery for beginners</a>
</footer>
<aside>
<nav>
<a href="events.basic.html" title="go prev" rel="prev">Prev</a>
<a href="index.html#30" title="back to Index" rel="index">Index</a>
<a href="#" title="reload" onclick="window.location.reload();return false">Reload</a>
<a href="events.namespace.html" title="go next" rel="next">Next</a>
</nav>
<hr/>
<code><em>// обработчики событий для box1</em>
$(<span>'#box1'</span>)
.mousedown(<span>'counter'</span>)
.mouseup(<span>'counter'</span>)
.click(<span>'counter'</span>)
.dblclick(<span>'counter'</span>)</code>
<code><em>// обработчики событий для box2</em>
$(<span>'#box2'</span>)
.mouseenter(<span>'counter'</span>)
.mouseleave(<span>'counter'</span>)</code>
<code><em>// обработчики событий для box3</em>
$(<span>'#box3'</span>)
.mousemove(<span>'counter'</span>)</code>
<code><em>// обработчики событий для box4</em>
$(<span>'#box4'</span>)
.mouseout(<span>'counter'</span>)
.mouseover(<span>'counter'</span>)</code>
</aside>
<aside id="output">
<h4>Events:</h4>
<hr/>
<ul class="events">
<li id="mousedown"><span>0</span><strong>mousedown</strong> - нажатие клавиши мыши</li>
<li id="mouseup"><span>0</span><strong>mouseup</strong> - отжатие клавиши мыши</li>
<li id="click"><span>0</span><strong>click</strong> - клик по элементу</li>
<li id="dblclick"><span>0</span><strong>dblclick</strong> - двойной клик по элементу</li>
<li id="mousemove"><span>0</span><strong>mousemove</strong> - движение курсора</li>
<li id="mouseenter"><span>0</span><strong>mouseenter</strong> - наведение курсора на элемент, не
учитывает на дочерние элементы
</li>
<li id="mouseleave"><span>0</span><strong>mouseleave</strong> - вывод курсора из элемента, не
учитывает дочерние элементы
</li>
<li id="mouseout"><span>0</span><strong>mouseout</strong> - вывод курсора из элемента</li>
<li id="mouseover"><span>0</span><strong>mouseover</strong> - наведение курсора на элемент</li>
</ul>
</aside>
</body>
</html>