+42
-21
lines changedFilter options
+42
-21
lines changed Original file line number Diff line number Diff line change
@@ -19,11 +19,14 @@ const keyCodes: { [key: string]: number | Array<number> } = {
19 19
const modifierCode: { [key: string]: string } = {
20 20
stop: '$event.stopPropagation();',
21 21
prevent: '$event.preventDefault();',
22 -
self: 'if($event.target !== $event.currentTarget)return;',
23 -
ctrl: 'if(!$event.ctrlKey)return;',
24 -
shift: 'if(!$event.shiftKey)return;',
25 -
alt: 'if(!$event.altKey)return;',
26 -
meta: 'if(!$event.metaKey)return;'
22 +
// #4868: modifiers that prevent the execution of the listener
23 +
// need to explicitly return null so that we can determine whether to remove
24 +
// the listener for .once
25 +
self: 'if($event.target !== $event.currentTarget)return null;',
26 +
ctrl: 'if(!$event.ctrlKey)return null;',
27 +
shift: 'if(!$event.shiftKey)return null;',
28 +
alt: 'if(!$event.altKey)return null;',
29 +
meta: 'if(!$event.metaKey)return null;'
27 30
}
28 31 29 32
export function genHandlers (events: ASTElementHandlers, native?: boolean): string {
@@ -62,12 +65,12 @@ function genHandler (
62 65
const handlerCode = simplePathRE.test(handler.value)
63 66
? handler.value + '($event)'
64 67
: handler.value
65 -
return 'function($event){' + code + handlerCode + '}'
68 +
return `function($event){${code}${handlerCode}}`
66 69
}
67 70
}
68 71 69 72
function genKeyFilter (keys: Array<string>): string {
70 -
return `if(${keys.map(genFilterCode).join('&&')})return;`
73 +
return `if(${keys.map(genFilterCode).join('&&')})return null;`
71 74
}
72 75 73 76
function genFilterCode (key: string): string {
@@ -32,7 +32,8 @@ function createEventHandle (fn: Function | Array<Function>): {
32 32
fn[i].apply(null, arguments)
33 33
}
34 34
} else {
35 -
fn.apply(null, arguments)
35 +
// return handler return value for single handlers
36 +
return fn.apply(null, arguments)
36 37
}
37 38
}
38 39
}
@@ -14,10 +14,12 @@ function add (
14 14
const oldHandler = handler
15 15
const _target = target // save current target element in closure
16 16
handler = function (ev) {
17 -
remove(event, handler, capture, _target)
18 -
arguments.length === 1
17 +
const res = arguments.length === 1
19 18
? oldHandler(ev)
20 19
: oldHandler.apply(null, arguments)
20 +
if (res !== null) {
21 +
remove(event, handler, capture, _target)
22 +
}
21 23
}
22 24
}
23 25
target.addEventListener(event, handler, capture)
@@ -173,6 +173,21 @@ describe('Directive v-on', () => {
173 173
expect(callOrder.toString()).toBe('1,2,2')
174 174
})
175 175 176 +
// #4846
177 +
it('should support once and other modifiers', () => {
178 +
vm = new Vue({
179 +
el,
180 +
template: `<div @click.once.self="foo"><span/></div>`,
181 +
methods: { foo: spy }
182 +
})
183 +
triggerEvent(vm.$el.firstChild, 'click')
184 +
expect(spy).not.toHaveBeenCalled()
185 +
triggerEvent(vm.$el, 'click')
186 +
expect(spy).toHaveBeenCalled()
187 +
triggerEvent(vm.$el, 'click')
188 +
expect(spy.calls.count()).toBe(1)
189 +
})
190 + 176 191
it('should support keyCode', () => {
177 192
vm = new Vue({
178 193
el,
@@ -229,27 +229,27 @@ describe('codegen', () => {
229 229
it('generate events with keycode', () => {
230 230
assertCodegen(
231 231
'<input @input.enter="onInput">',
232 -
`with(this){return _c('input',{on:{"input":function($event){if(_k($event.keyCode,"enter",13))return;onInput($event)}}})}`
232 +
`with(this){return _c('input',{on:{"input":function($event){if(_k($event.keyCode,"enter",13))return null;onInput($event)}}})}`
233 233
)
234 234
// multiple keycodes (delete)
235 235
assertCodegen(
236 236
'<input @input.delete="onInput">',
237 -
`with(this){return _c('input',{on:{"input":function($event){if(_k($event.keyCode,"delete",[8,46]))return;onInput($event)}}})}`
237 +
`with(this){return _c('input',{on:{"input":function($event){if(_k($event.keyCode,"delete",[8,46]))return null;onInput($event)}}})}`
238 238
)
239 239
// multiple keycodes (chained)
240 240
assertCodegen(
241 241
'<input @keydown.enter.delete="onInput">',
242 -
`with(this){return _c('input',{on:{"keydown":function($event){if(_k($event.keyCode,"enter",13)&&_k($event.keyCode,"delete",[8,46]))return;onInput($event)}}})}`
242 +
`with(this){return _c('input',{on:{"keydown":function($event){if(_k($event.keyCode,"enter",13)&&_k($event.keyCode,"delete",[8,46]))return null;onInput($event)}}})}`
243 243
)
244 244
// number keycode
245 245
assertCodegen(
246 246
'<input @input.13="onInput">',
247 -
`with(this){return _c('input',{on:{"input":function($event){if($event.keyCode!==13)return;onInput($event)}}})}`
247 +
`with(this){return _c('input',{on:{"input":function($event){if($event.keyCode!==13)return null;onInput($event)}}})}`
248 248
)
249 249
// custom keycode
250 250
assertCodegen(
251 251
'<input @input.custom="onInput">',
252 -
`with(this){return _c('input',{on:{"input":function($event){if(_k($event.keyCode,"custom"))return;onInput($event)}}})}`
252 +
`with(this){return _c('input',{on:{"input":function($event){if(_k($event.keyCode,"custom"))return null;onInput($event)}}})}`
253 253
)
254 254
})
255 255
@@ -264,33 +264,33 @@ describe('codegen', () => {
264 264
)
265 265
assertCodegen(
266 266
'<input @input.self="onInput">',
267 -
`with(this){return _c('input',{on:{"input":function($event){if($event.target !== $event.currentTarget)return;onInput($event)}}})}`
267 +
`with(this){return _c('input',{on:{"input":function($event){if($event.target !== $event.currentTarget)return null;onInput($event)}}})}`
268 268
)
269 269
})
270 270 271 271
it('generate events with mouse event modifiers', () => {
272 272
assertCodegen(
273 273
'<input @click.ctrl="onClick">',
274 -
`with(this){return _c('input',{on:{"click":function($event){if(!$event.ctrlKey)return;onClick($event)}}})}`
274 +
`with(this){return _c('input',{on:{"click":function($event){if(!$event.ctrlKey)return null;onClick($event)}}})}`
275 275
)
276 276
assertCodegen(
277 277
'<input @click.shift="onClick">',
278 -
`with(this){return _c('input',{on:{"click":function($event){if(!$event.shiftKey)return;onClick($event)}}})}`
278 +
`with(this){return _c('input',{on:{"click":function($event){if(!$event.shiftKey)return null;onClick($event)}}})}`
279 279
)
280 280
assertCodegen(
281 281
'<input @click.alt="onClick">',
282 -
`with(this){return _c('input',{on:{"click":function($event){if(!$event.altKey)return;onClick($event)}}})}`
282 +
`with(this){return _c('input',{on:{"click":function($event){if(!$event.altKey)return null;onClick($event)}}})}`
283 283
)
284 284
assertCodegen(
285 285
'<input @click.meta="onClick">',
286 -
`with(this){return _c('input',{on:{"click":function($event){if(!$event.metaKey)return;onClick($event)}}})}`
286 +
`with(this){return _c('input',{on:{"click":function($event){if(!$event.metaKey)return null;onClick($event)}}})}`
287 287
)
288 288
})
289 289 290 290
it('generate events with multiple modifers', () => {
291 291
assertCodegen(
292 292
'<input @input.stop.prevent.self="onInput">',
293 -
`with(this){return _c('input',{on:{"input":function($event){$event.stopPropagation();$event.preventDefault();if($event.target !== $event.currentTarget)return;onInput($event)}}})}`
293 +
`with(this){return _c('input',{on:{"input":function($event){$event.stopPropagation();$event.preventDefault();if($event.target !== $event.currentTarget)return null;onInput($event)}}})}`
294 294
)
295 295
})
296 296 You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4