allow event handlers to call event methods e.g. stopPropagation – closes #162

src/generate/visitors/attributes/addElementAttributes.js

@@ -1,6 +1,7 @@
 import attributeLookup from './lookup.js';
 import createBinding from './binding/index.js';
 import deindent from '../../../utils/deindent.js';
+import flattenReference from '../../../utils/flattenReference.js';
 
 export default function addElementAttributes ( generator, node, local ) {
 	node.attributes.forEach( attribute => {
@@ -114,7 +115,12 @@ export default function addElementAttributes ( generator, node, local ) {
 		else if ( attribute.type === 'EventHandler' ) {
 			// TODO verify that it's a valid callee (i.e. built-in or declared method)
 			generator.addSourcemapLocations( attribute.expression );
-			generator.code.prependRight( attribute.expression.start, 'component.' );
+
+			const flattened = flattenReference( attribute.expression.callee );
+			if ( flattened.name !== 'event' ) {
+				// allow event.stopPropagation() etc
+				generator.code.prependRight( attribute.expression.start, 'component.' );
+			}
 
 			const usedContexts = new Set();
 			attribute.expression.arguments.forEach( arg => {

test/generator/event-handler-event-methods/_config.js

@@ -0,0 +1,15 @@
+export default {
+	solo: true,
+	show: true,
+
+	test ( assert, component, target, window ) {
+		const allow = target.querySelector( '.allow-propagation' );
+		const stop = target.querySelector( '.stop-propagation' );
+
+		allow.dispatchEvent( new window.MouseEvent( 'click', { bubbles: true }) );
+		stop.dispatchEvent( new window.MouseEvent( 'click', { bubbles: true }) );
+
+		assert.equal( component.get( 'foo' ), true );
+		assert.equal( component.get( 'bar' ), false );
+	}
+};

test/generator/event-handler-event-methods/main.html

@@ -0,0 +1,18 @@
+<div on:click='set({ foo: true })'>
+	<button class='allow-propagation'>click me</button>
+</div>
+
+<div on:click='set({ bar: true })'>
+	<button class='stop-propagation' on:click='event.stopPropagation()'>click me</button>
+</div>
+
+<script>
+	export default {
+		data () {
+			return {
+				foo: false,
+				bar: false
+			};
+		}
+	};
+</script>