From 2768653a47201b1ade5e0e1a9afebacf116df8d3 Mon Sep 17 00:00:00 2001
From: Rich-Harris <richard.a.harris@gmail.com>
Date: Fri, 9 Dec 2016 09:00:02 -0500
Subject: [PATCH] =?UTF-8?q?allow=20event=20handlers=20to=20call=20event=20?=
 =?UTF-8?q?methods=20e.g.=20stopPropagation=20=E2=80=93=20closes=20#162?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../attributes/addElementAttributes.js         |  8 +++++++-
 .../event-handler-event-methods/_config.js     | 15 +++++++++++++++
 .../event-handler-event-methods/main.html      | 18 ++++++++++++++++++
 3 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 test/generator/event-handler-event-methods/_config.js
 create mode 100644 test/generator/event-handler-event-methods/main.html

diff --git a/src/generate/visitors/attributes/addElementAttributes.js b/src/generate/visitors/attributes/addElementAttributes.js
index 532835732c..c4c2d7e8de 100644
--- a/src/generate/visitors/attributes/addElementAttributes.js
+++ b/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 => {
diff --git a/test/generator/event-handler-event-methods/_config.js b/test/generator/event-handler-event-methods/_config.js
new file mode 100644
index 0000000000..2b8ddd4f50
--- /dev/null
+++ b/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 );
+	}
+};
diff --git a/test/generator/event-handler-event-methods/main.html b/test/generator/event-handler-event-methods/main.html
new file mode 100644
index 0000000000..0aa130e449
--- /dev/null
+++ b/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>