|
8 | 8 | <style> |
9 | 9 | #test1 { |
10 | 10 | background-color: #000; |
11 | | - width: 100px; |
| 11 | + width: 120px; |
12 | 12 | height: 100px; |
13 | 13 | color: #fff; |
14 | 14 | float: left; |
15 | 15 | } |
16 | 16 |
|
17 | 17 | #test2 { |
18 | 18 | background-color: #333; |
19 | | - width: 100px; |
| 19 | + width: 120px; |
20 | 20 | height: 100px; |
21 | 21 | color: #fff; |
22 | 22 | float: left; |
23 | 23 | } |
24 | 24 |
|
25 | 25 | #test3 { |
26 | 26 | background-color: #666; |
27 | | - width: 100px; |
| 27 | + width: 120px; |
28 | 28 | height: 100px; |
29 | 29 | color: #fff; |
30 | 30 | float: left; |
31 | 31 | } |
32 | 32 |
|
33 | 33 | #test4 { |
34 | 34 | background-color: #000; |
35 | | - width: 100px; |
| 35 | + width: 120px; |
36 | 36 | height: 100px; |
37 | 37 | color: #fff; |
38 | 38 | float: left; |
|
74 | 74 | position: absolute; |
75 | 75 | top: 395px; |
76 | 76 | left: 12px; |
77 | | - width: 380px; |
| 77 | + width: 460px; |
78 | 78 | height: 290px; |
79 | 79 | overflow: auto; |
80 | 80 | } |
| 81 | + |
| 82 | + #logger p { |
| 83 | + font-family: Arial, sans-serif; |
| 84 | + font-size: 13px; |
| 85 | + padding: 2px; |
| 86 | + border-bottom: 1px solid #ccc; |
| 87 | + margin: 0; |
| 88 | + } |
| 89 | + |
| 90 | + #logger p:nth-child(even) { |
| 91 | + background-color: #FFFFE8; |
| 92 | + } |
| 93 | + |
| 94 | + #logger p:nth-child(10n) { |
| 95 | + border-bottom-color: #000; |
| 96 | + } |
81 | 97 | </style> |
82 | 98 | <script type="text/javascript"> |
83 | 99 | $(function() { |
84 | 100 | $('#userAgent').html(navigator.userAgent); |
85 | 101 |
|
86 | 102 |
|
87 | 103 | $('#test1') |
88 | | - .mousewheel(function(event, delta) { |
| 104 | + .mousewheel(function(event, delta, deltaX, deltaY) { |
| 105 | + var o = ''; |
89 | 106 | if (delta > 0) |
90 | | - log('#test1: up ('+delta+')'); |
| 107 | + o = '#test1: up ('+delta+')'; |
91 | 108 | else if (delta < 0) |
92 | | - log('#test1: down ('+delta+')'); |
| 109 | + o = '#test1: down ('+delta+')'; |
| 110 | + |
| 111 | + if (deltaX > 0) |
| 112 | + o = o + ', east ('+deltaX+')'; |
| 113 | + else if (deltaX < 0) |
| 114 | + o = o + ', west ('+deltaX+')'; |
| 115 | + |
| 116 | + if (deltaY > 0) |
| 117 | + o = o + ', north ('+deltaY+')'; |
| 118 | + else if (deltaY < 0) |
| 119 | + o = o + ', south ('+deltaY+')'; |
| 120 | + |
| 121 | + if( o != '' ) |
| 122 | + log( o ); |
93 | 123 |
|
94 | 124 | log('pageX: ' + event.pageX + ' pageY: ' + event.pageY ); |
95 | 125 | }); |
96 | 126 |
|
97 | 127 | $('#test2') |
98 | | - .mousewheel(function(event, delta) { |
| 128 | + .mousewheel(function(event, delta, deltaX, deltaY) { |
| 129 | + var o = ''; |
99 | 130 | if (delta > 0) |
100 | | - log('#test2: up ('+delta+')'); |
| 131 | + o = '#test2: up ('+delta+')'; |
101 | 132 | else if (delta < 0) |
102 | | - log('#test2: down ('+delta+')'); |
| 133 | + o = '#test2: down ('+delta+')'; |
| 134 | + |
| 135 | + if (deltaX > 0) |
| 136 | + o = o + ', east ('+deltaX+')'; |
| 137 | + else if (deltaX < 0) |
| 138 | + o = o + ', west ('+deltaX+')'; |
| 139 | + |
| 140 | + if (deltaY > 0) |
| 141 | + o = o + ', north ('+deltaY+')'; |
| 142 | + else if (deltaY < 0) |
| 143 | + o = o + ', south ('+deltaY+')'; |
| 144 | + |
| 145 | + if( o != '' ) |
| 146 | + log( o ); |
103 | 147 | return false; // prevent default |
104 | 148 | }); |
105 | 149 |
|
106 | 150 | $('#test3') |
107 | 151 | .hover(function() { log('#test3: mouseover'); }, function() { log('#test3: mouseout'); }) |
108 | | - .mousewheel(function(event, delta) { |
| 152 | + .mousewheel(function(event, delta, deltaX, deltaY) { |
109 | 153 | log('#test3: I should not have been logged'); |
110 | 154 | }) |
111 | 155 | .unmousewheel(); |
112 | 156 |
|
113 | | - var testRemoval = function(event, delta) { |
| 157 | + var testRemoval = function(event, delta, deltaX, deltaY) { |
114 | 158 | log('#test4: I should not have been logged'); |
115 | 159 | }; |
116 | 160 |
|
117 | 161 | $('#test4') |
118 | | - .mousewheel(function(event, delta) { |
| 162 | + .mousewheel(function(event, delta, deltaX, deltaY) { |
| 163 | + var o = ''; |
119 | 164 | if (delta > 0) |
120 | | - log('#test4: up ('+delta+')'); |
| 165 | + o = '#test4: up ('+delta+')'; |
121 | 166 | else if (delta < 0) |
122 | | - log('#test4: down ('+delta+')'); |
| 167 | + o = '#test4: down ('+delta+')'; |
| 168 | + |
| 169 | + if (deltaX > 0) |
| 170 | + o = o + ', east ('+deltaX+')'; |
| 171 | + else if (deltaX < 0) |
| 172 | + o = o + ', west ('+deltaX+')'; |
| 173 | + |
| 174 | + if (deltaY > 0) |
| 175 | + o = o + ', north ('+deltaY+')'; |
| 176 | + else if (deltaY < 0) |
| 177 | + o = o + ', south ('+deltaY+')'; |
| 178 | + |
| 179 | + if( o != '' ) |
| 180 | + log( o ); |
123 | 181 | return false; |
124 | 182 | }) |
125 | 183 | .mousewheel(testRemoval) |
126 | | - .mousewheel(function(event, delta) { |
| 184 | + .mousewheel(function(event, delta, deltaX, deltaY) { |
| 185 | + var o = ''; |
127 | 186 | if (delta > 0) |
128 | | - log('#test4: up ('+delta+') from 2nd handler'); |
| 187 | + o = '#test4: up ('+delta+')'; |
129 | 188 | else if (delta < 0) |
130 | | - log('#test4: down ('+delta+') from 2nd handler'); |
| 189 | + o = '#test4: down ('+delta+')'; |
| 190 | + |
| 191 | + if (deltaX > 0) |
| 192 | + o = o + ', east ('+deltaX+')'; |
| 193 | + else if (deltaX < 0) |
| 194 | + o = o + ', west ('+deltaX+')'; |
| 195 | + |
| 196 | + if (deltaY > 0) |
| 197 | + o = o + ', north ('+deltaY+')'; |
| 198 | + else if (deltaY < 0) |
| 199 | + o = o + ', south ('+deltaY+')'; |
| 200 | + |
| 201 | + if( o != '' ) |
| 202 | + log( o + ' from 2nd handler' ); |
131 | 203 | return false; |
132 | 204 | }) |
133 | 205 | .unmousewheel(testRemoval); |
134 | 206 |
|
135 | 207 | $('#test5') |
136 | | - .mousewheel(function(event, delta) { |
| 208 | + .mousewheel(function(event, delta, deltaX, deltaY) { |
| 209 | + var o = ''; |
137 | 210 | if (delta > 0) |
138 | | - log('#test5: up ('+delta+')'); |
| 211 | + o = '#test5: up ('+delta+')'; |
139 | 212 | else if (delta < 0) |
140 | | - log('#test5: down ('+delta+')'); |
| 213 | + o = '#test5: down ('+delta+')'; |
| 214 | + |
| 215 | + if (deltaX > 0) |
| 216 | + o = o + ', east ('+deltaX+')'; |
| 217 | + else if (deltaX < 0) |
| 218 | + o = o + ', west ('+deltaX+')'; |
| 219 | + |
| 220 | + if (deltaY > 0) |
| 221 | + o = o + ', north ('+deltaY+')'; |
| 222 | + else if (deltaY < 0) |
| 223 | + o = o + ', south ('+deltaY+')'; |
| 224 | + |
| 225 | + if( o != '' ) |
| 226 | + log( o ); |
141 | 227 |
|
142 | 228 | event.stopPropagation(); |
143 | 229 | event.preventDefault(); |
144 | 230 | }); |
145 | 231 |
|
146 | 232 | $('#test6') |
147 | | - .mousewheel(function(event, delta) { |
| 233 | + .mousewheel(function(event, delta, deltaX, deltaY) { |
| 234 | + var o = ''; |
148 | 235 | if (delta > 0) |
149 | | - log('#test6: up ('+delta+')'); |
| 236 | + o = '#test6: up ('+delta+')'; |
150 | 237 | else if (delta < 0) |
151 | | - log('#test6: down ('+delta+')'); |
| 238 | + o = '#test6: down ('+delta+')'; |
| 239 | + |
| 240 | + if (deltaX > 0) |
| 241 | + o = o + ', east ('+deltaX+')'; |
| 242 | + else if (deltaX < 0) |
| 243 | + o = o + ', west ('+deltaX+')'; |
| 244 | + |
| 245 | + if (deltaY > 0) |
| 246 | + o = o + ', north ('+deltaY+')'; |
| 247 | + else if (deltaY < 0) |
| 248 | + o = o + ', south ('+deltaY+')'; |
| 249 | + |
| 250 | + if( o != '' ) |
| 251 | + log( o ); |
152 | 252 |
|
153 | 253 | event.stopPropagation(); |
154 | 254 | event.preventDefault(); |
155 | 255 | }); |
156 | 256 |
|
157 | 257 | $('#test7') |
158 | | - .mousewheel(function(event, delta) { |
| 258 | + .mousewheel(function(event, delta, deltaX, deltaY) { |
| 259 | + var o = ''; |
159 | 260 | if (delta > 0) |
160 | | - log('#test7: up ('+delta+')'); |
| 261 | + o = '#test7: up ('+delta+')'; |
161 | 262 | else if (delta < 0) |
162 | | - log('#test7 down ('+delta+')'); |
| 263 | + o = '#test7: down ('+delta+')'; |
| 264 | + |
| 265 | + if (deltaX > 0) |
| 266 | + o = o + ', east ('+deltaX+')'; |
| 267 | + else if (deltaX < 0) |
| 268 | + o = o + ', west ('+deltaX+')'; |
| 269 | + |
| 270 | + if (deltaY > 0) |
| 271 | + o = o + ', north ('+deltaY+')'; |
| 272 | + else if (deltaY < 0) |
| 273 | + o = o + ', south ('+deltaY+')'; |
| 274 | + |
| 275 | + if( o != '' ) |
| 276 | + log( o ); |
163 | 277 |
|
164 | 278 | event.preventDefault(); |
165 | 279 | }); |
166 | 280 |
|
167 | 281 | function log(msg) { |
168 | | - $('#logger').append(msg+'<br>').scrollTop(999999); |
| 282 | + $('#logger').append('<p>'+msg+'</p>').scrollTop(999999); |
169 | 283 | }; |
170 | 284 | }); |
171 | 285 | </script> |
|
0 commit comments