8000 add .capture & .self modifiers to v-on · ormazza/vue@5c3f0b5 · GitHub
[go: up one dir, main page]
Skip to content

Commit 5c3f0b5

Browse files
yyx990803yyx990803
committed
add .capture & .self modifiers to v-on
1 parent 2c2894d commit 5c3f0b5

File tree

4 files changed

+62
-6
lines changed

4 files changed

+62
-6
lines changed

‎src/directive.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -288,10 +288,11 @@ Directive.prototype._withLock = function (fn) {
288288
*
289289
* @param {String} event
290290
* @param {Function} handler
291+
* @param {Boolean} [useCapture]
291292
*/
292293

293-
Directive.prototype.on = function (event, handler) {
294-
on(this.el, event, handler)
294+
Directive.prototype.on = function (event, handler, useCapture) {
295+
on(this.el, event, handler, useCapture)
295296
;(this._listeners || (this._listeners = []))
296297
.push([event, handler])
297298
}

‎src/directives/public/on.js

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,14 @@ function preventFilter (handler) {
5050
}
5151
}
5252

53+
function selfFilter (handler) {
54+
return function selfHandler (e) {
55+
if (e.target === e.currentTarget) {
56+
return handler.call(this, e)
57+
}
58+
}
59+
}
60+
5361
export default {
5462

5563
acceptStatement: true,
@@ -63,7 +71,12 @@ export default {
6371
) {
6472
var self = this
6573
this.iframeBind = function () {
66-
on(self.el.contentWindow, self.arg, self.handler)
74+
on(
75+
self.el.contentWindow,
76+
self.arg,
77+
self.handler,
78+
self.modifiers.capture
79+
)
6780
}
6881
this.on('load', this.iframeBind)
6982
}
@@ -92,6 +105,9 @@ export default {
92105
if (this.modifiers.prevent) {
93106
handler = preventFilter(handler)
94107
}
108+
if (this.modifiers.self) {
109+
handler = selfFilter(handler)
110+
}
95111
// key filter
96112
var keys = Object.keys(this.modifiers)
97113
.filter(function (key) {
@@ -107,7 +123,12 @@ export default {
107123
if (this.iframeBind) {
108124
this.iframeBind()
109125
} else {
110-
on(this.el, this.arg, this.handler)
126+
on(
127+
this.el,
128+
this.arg,
129+
this.handler,
130+
this.modifiers.capture
131+
)
111132
}
112133
},
113134

‎src/util/dom.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -160,10 +160,11 @@ export function replace (target, el) {
160160
* @param {Element} el
161161
* @param {String} event
162162
* @param {Function} cb
163+
* @param {Boolean} [useCapture]
163164
*/
164165

165-
export function on (el, event, cb) {
166-
el.addEventListener(event, cb)
166+
export function on (el, event, cb, useCapture) {
167+
el.addEventListener(event, cb, useCapture)
167168
}
168169

169170
/**

‎test/unit/specs/directives/public/on_spec.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -216,6 +216,39 @@ describe('v-on', function () {
216216
expect(window.location.hash).toBe(hash)
217217
})
218218

219+
it('capture modifier', function () {
220+
document.body.appendChild(el)
221+
var outer = jasmine.createSpy('outer')
222+
var inner = jasmine.createSpy('inner')
223+
new Vue({
224+
el: el,
225+
template: '<div @click.capture.stop="outer"><div class="inner" @click="inner"></div></div>',
226+
methods: {
227+
outer: outer,
228+
inner: inner
229+
}
230+
})
231+
trigger(el.querySelector('.inner'), 'click')
232+
expect(outer).toHaveBeenCalled()
233+
expect(inner).not.toHaveBeenCalled()
234+
document.body.removeChild(el)
235+
})
236+
237+
it('self modifier', function () {
238+
var outer = jasmine.createSpy('outer')
239+
new Vue({
240+
el: el,
241+
template: '<div class="outer" @click.self="outer"><div class="inner"></div></div>',
242+
methods: {
243+
outer: outer
244+
}
245+
})
246+
trigger(el.querySelector('.inner'), 'click')
247+
expect(outer).not.toHaveBeenCalled()
248+
trigger(el.querySelector('.outer'), 'click')
249+
expect(outer).toHaveBeenCalled()
250+
})
251+
219252
it('multiple modifiers working together', function () {
220253
var outer = jasmine.createSpy('outer')
221254
var prevented

0 commit comments

Comments
 (0)
0