enable $event in v-on expressions + enable e.preventDefault()

yyx990803 · yyx990803 · commit 1b1d72ea5680 · 2014-03-16T22:09:53.000-04:00
diff --git a/src/compiler.js b/src/compiler.js
@@ -76,6 +76,7 @@ function Compiler (vm, options) {
     def(vm, '$el', el)
     def(vm, '$options', options)
     def(vm, '$compiler', compiler)
+    def(vm, '$event', null, false, true)
 
     // set parent
     var parentVM = options.parent
@@ -783,7 +784,8 @@ CompilerProto.addDelegator = function (event) {
             }
         }
     }
-    this.el.addEventListener(event, delegator.handler)
+    // useCapture:true so e.preventDefault() works
+    this.el.addEventListener(event, delegator.handler, true)
     return delegator
 }
 
diff --git a/src/directives/on.js b/src/directives/on.js
@@ -21,12 +21,15 @@ module.exports = {
         }
         var el       = this.el,
             targetVM = this.vm,
-            ownerVM  = this.binding.compiler.vm,
-            isExp    = this.binding.isExp,
+            context  = this.binding.isExp
+                ? targetVM
+                : this.binding.compiler.vm,
             newHandler = function (e) {
                 e.targetEl = el
                 e.targetVM = targetVM
-                handler.call(isExp ? targetVM : ownerVM, e)
+                context.$event = e
+                handler.call(context, e)
+                context.$event = null
             }
         if (!this.bubbles) {
             this.reset()
diff --git a/src/utils.js b/src/utils.js
@@ -79,11 +79,12 @@ var utils = module.exports = {
      *  This avoids it being included in JSON.stringify
      *  or for...in loops.
      */
-    defProtected: function (obj, key, val, enumerable) {
+    defProtected: function (obj, key, val, enumerable, writable) {
         if (obj.hasOwnProperty(key)) return
         Object.defineProperty(obj, key, {
             value        : val,
             enumerable   : !!enumerable,
+            writable     : !!writable,
             configurable : true
         })
     },
diff --git a/test/functional/fixtures/animation.html b/test/functional/fixtures/animation.html
@@ -4,54 +4,66 @@
         display: inline-block;
     }
     .v-enter {
-        -webkit-animation: fadein .2s;
         animation: fadein .2s;
+        -webkit-animation: fadein .2s;
     }
     .v-leave {
-        -webkit-animation: fadeout .2s;
         animation: fadeout .2s;
+        -webkit-animation: fadeout .2s;
     }
     @keyframes fadein {
         0% {
+            -webkit-transform: scale(0);
             transform: scale(0);
         }
         50% {
+            -webkit-transform: scale(1.5);
             transform: scale(1.5);
         }
         100% {
+            -webkit-transform: scale(1);
             transform: scale(1);
         }
     }
     @keyframes fadeout {
         0% {
             transform: scale(1);
+            -webkit-transform: scale(1);
         }
         50% {
             transform: scale(1.5);
+            -webkit-transform: scale(1.5);
         }
         100% {
             transform: scale(0);
+            -webkit-transform: scale(0);
         }
     }
     @-webkit-keyframes fadein {
         0% {
             -webkit-transform: scale(0);
+            transform: scale(0);
         }
         50% {
             -webkit-transform: scale(1.5);
+            transform: scale(1.5);
         }
         100% {
             -webkit-transform: scale(1);
+            transform: scale(1);
         }
     }
     @-webkit-keyframes fadeout {
         0% {
+            transform: scale(1);
             -webkit-transform: scale(1);
         }
         50% {
+            transform: scale(1.5);
             -webkit-transform: scale(1.5);
         }
         100% {
+            transform: scale(0);
             -webkit-transform: scale(0);
         }
     }
diff --git a/test/functional/fixtures/events.html b/test/functional/fixtures/events.html
@@ -0,0 +1,27 @@
+<script src="../../../dist/vue.js"></script>
+
+<div v-on="click:outer">
+    <p class="outer" v-show="outerTriggered">Outer triggered</p>
+    <p class="msg">{{msg}}</p>
+    <a class="normal" v-on="click:normal">normal</a>
+    <a class="exp" href="#triggered" v-on="click:exp('hello', $event)">exp</a>
+</div>
+
+<script>
+var test = new Vue({
+    el: 'div',
+    methods: {
+        outer: function () {
+            this.outerTriggered = true
+        },
+        normal: function (e) {
+            e.stopPropagation()
+        },
+        exp: function (msg, e) {
+            this.msg = msg
+            e.stopPropagation()
+            e.preventDefault()
+        }
+    }
+})
+</script>
diff --git a/test/functional/specs/events.js b/test/functional/specs/events.js
@@ -0,0 +1,26 @@
+casper.test.begin('Events', 5, function (test) {
+    
+    // testing event delegation
+    // mostly inline events
+    // and e.stopPropagation(), e.preventDefault()
+
+    casper
+    .start('./fixtures/events.html')
+    .thenClick('.normal', function () {
+        test.assertNotVisible('.outer')
+    })
+    .thenClick('.exp', function () {
+        test.assertNotVisible('.outer')
+        test.assertSelectorHasText('.msg', 'hello')
+        test.assertEval(function () {
+            return !window.location.hash
+        })
+    })
+    .thenClick('div', function () {
+        test.assertVisible('.outer')
+    })
+    .run(function () {
+        test.done()
+    })
+
+})

Original file line number	Diff line number	Diff line change
`@@ -76,6 +76,7 @@ function Compiler (vm, options) {`
`76`	`76`	`def(vm, '$el', el)`
`77`	`77`	`def(vm, '$options', options)`
`78`	`78`	`def(vm, '$compiler', compiler)`
	`79`	`+ def(vm, '$event', null, false, true)`
`79`	`80`
`80`	`81`	`// set parent`
`81`	`82`	`var parentVM = options.parent`
`@@ -783,7 +784,8 @@ CompilerProto.addDelegator = function (event) {`
`783`	`784`	`}`
`784`	`785`	`}`
`785`	`786`	`}`
`786`		`- this.el.addEventListener(event, delegator.handler)`
	`787`	`+ // useCapture:true so e.preventDefault() works`
	`788`	`+ this.el.addEventListener(event, delegator.handler, true)`
`787`	`789`	`return delegator`
`788`	`790`	`}`
`789`	`791`
Original file line number	Diff line number	Diff line change
`@@ -4,54 +4,66 @@`
`4`	`4`	`display: inline-block;`
`5`	`5`	`}`
`6`	`6`	`.v-enter {`
`7`		`- -webkit-animation: fadein .2s;`
`8`	`7`	`animation: fadein .2s;`
	`8`	`+ -webkit-animation: fadein .2s;`
`9`	`9`	`}`
`10`	`10`	`.v-leave {`
`11`		`- -webkit-animation: fadeout .2s;`
`12`	`11`	`animation: fadeout .2s;`
	`12`	`+ -webkit-animation: fadeout .2s;`
`13`	`13`	`}`
`14`	`14`	`@keyframes fadein {`
`15`	`15`	`0% {`
	`16`	`+ -webkit-transform: scale(0);`
`16`	`17`	`transform: scale(0);`
`17`	`18`	`}`
`18`	`19`	`50% {`
	`20`	`+ -webkit-transform: scale(1.5);`
`19`	`21`	`transform: scale(1.5);`
`20`	`22`	`}`
`21`	`23`	`100% {`
	`24`	`+ -webkit-transform: scale(1);`
`22`	`25`	`transform: scale(1);`
`23`	`26`	`}`
`24`	`27`	`}`
`25`	`28`	`@keyframes fadeout {`
`26`	`29`	`0% {`
`27`	`30`	`transform: scale(1);`
	`31`	`+ -webkit-transform: scale(1);`
`28`	`32`	`}`
`29`	`33`	`50% {`
`30`	`34`	`transform: scale(1.5);`
	`35`	`+ -webkit-transform: scale(1.5);`
`31`	`36`	`}`
`32`	`37`	`100% {`
`33`	`38`	`transform: scale(0);`
	`39`	`+ -webkit-transform: scale(0);`
`34`	`40`	`}`
`35`	`41`	`}`
`36`	`42`	`@-webkit-keyframes fadein {`
`37`	`43`	`0% {`
`38`	`44`	`-webkit-transform: scale(0);`
	`45`	`+ transform: scale(0);`
`39`	`46`	`}`
`40`	`47`	`50% {`
`41`	`48`	`-webkit-transform: scale(1.5);`
	`49`	`+ transform: scale(1.5);`
`42`	`50`	`}`
`43`	`51`	`100% {`
`44`	`52`	`-webkit-transform: scale(1);`
	`53`	`+ transform: scale(1);`
`45`	`54`	`}`
`46`	`55`	`}`
`47`	`56`	`@-webkit-keyframes fadeout {`
`48`	`57`	`0% {`
	`58`	`+ transform: scale(1);`
`49`	`59`	`-webkit-transform: scale(1);`
`50`	`60`	`}`
`51`	`61`	`50% {`
	`62`	`+ transform: scale(1.5);`
`52`	`63`	`-webkit-transform: scale(1.5);`
`53`	`64`	`}`
`54`	`65`	`100% {`
	`66`	`+ transform: scale(0);`
`55`	`67`	`-webkit-transform: scale(0);`
`56`	`68`	`}`
`57`	`69`	`}`