add .capture & .self modifiers to v-on

Author: yyx990803

src/directive.js

@@ -288,10 +288,11 @@ Directive.prototype._withLock = function (fn) {
  *
  * @param {String} event
  * @param {Function} handler
+ * @param {Boolean} [useCapture]
  */
 
-Directive.prototype.on = function (event, handler) {
-  on(this.el, event, handler)
+Directive.prototype.on = function (event, handler, useCapture) {
+  on(this.el, event, handler, useCapture)
   ;(this._listeners || (this._listeners = []))
     .push([event, handler])
 }

src/directives/public/on.js

@@ -50,6 +50,14 @@ function preventFilter (handler) {
   }
 }
 
+function selfFilter (handler) {
+  return function selfHandler (e) {
+    if (e.target === e.currentTarget) {
+      return handler.call(this, e)
+    }
+  }
+}
+
 export default {
 
   acceptStatement: true,
@@ -63,7 +71,12 @@ export default {
     ) {
       var self = this
       this.iframeBind = function () {
-        on(self.el.contentWindow, self.arg, self.handler)
+        on(
+          self.el.contentWindow,
+          self.arg,
+          self.handler,
+          self.modifiers.capture
+        )
       }
       this.on('load', this.iframeBind)
     }
@@ -92,6 +105,9 @@ export default {
     if (this.modifiers.prevent) {
       handler = preventFilter(handler)
     }
+    if (this.modifiers.self) {
+      handler = selfFilter(handler)
+    }
     // key filter
     var keys = Object.keys(this.modifiers)
       .filter(function (key) {
@@ -107,7 +123,12 @@ export default {
     if (this.iframeBind) {
       this.iframeBind()
     } else {
-      on(this.el, this.arg, this.handler)
+      on(
+        this.el,
+        this.arg,
+        this.handler,
+        this.modifiers.capture
+      )
     }
   },
 

src/util/dom.js

@@ -160,10 +160,11 @@ export function replace (target, el) {
  * @param {Element} el
  * @param {String} event
  * @param {Function} cb
+ * @param {Boolean} [useCapture]
  */
 
-export function on (el, event, cb) {
-  el.addEventListener(event, cb)
+export function on (el, event, cb, useCapture) {
+  el.addEventListener(event, cb, useCapture)
 }
 
 /**

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

@@ -216,6 +216,39 @@ describe('v-on', function () {
     expect(window.location.hash).toBe(hash)
   })
 
+  it('capture modifier', function () {
+    document.body.appendChild(el)
+    var outer = jasmine.createSpy('outer')
+    var inner = jasmine.createSpy('inner')
+    new Vue({
+      el: el,
+      template: '<div @click.capture.stop="outer"><div class="inner" @click="inner"></div></div>',
+      methods: {
+        outer: outer,
+        inner: inner
+      }
+    })
+    trigger(el.querySelector('.inner'), 'click')
+    expect(outer).toHaveBeenCalled()
+    expect(inner).not.toHaveBeenCalled()
+    document.body.removeChild(el)
+  })
+
+  it('self modifier', function () {
+    var outer = jasmine.createSpy('outer')
+    new Vue({
+      el: el,
+      template: '<div class="outer" @click.self="outer"><div class="inner"></div></div>',
+      methods: {
+        outer: outer
+      }
+    })
+    trigger(el.querySelector('.inner'), 'click')
+    expect(outer).not.toHaveBeenCalled()
+    trigger(el.querySelector('.outer'), 'click')
+    expect(outer).toHaveBeenCalled()
+  })
+
   it('multiple modifiers working together', function () {
     var outer = jasmine.createSpy('outer')
     var prevented