diff --git a/src/generate/visitors/attributes/addElementAttributes.js b/src/generate/visitors/attributes/addElementAttributes.js index 532835732c..4873d2d637 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' && flattened.name !== 'this' ) { + // allow event.stopPropagation(), this.select() etc + generator.code.prependRight( attribute.expression.start, 'component.' ); + } const usedContexts = new Set(); attribute.expression.arguments.forEach( arg => { diff --git a/src/utils/flattenReference.js b/src/utils/flattenReference.js index 2000c8941a..c975c65095 100644 --- a/src/utils/flattenReference.js +++ b/src/utils/flattenReference.js @@ -7,10 +7,10 @@ export default function flatten ( node ) { node = node.object; } - if ( node.type !== 'Identifier' ) return null; + const name = node.type === 'Identifier' ? node.name : node.type === 'ThisExpression' ? 'this' : null; - const name = node.name; - parts.unshift( name ); + if ( !name ) return null; + parts.unshift( name ); return { name, keypath: parts.join( '.' ) }; } 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..8b701e9825 --- /dev/null +++ b/test/generator/event-handler-event-methods/_config.js @@ -0,0 +1,12 @@ +export default { + 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 @@ +
+ +
+ +
+ +
+ + diff --git a/test/generator/event-handler-this-methods/_config.js b/test/generator/event-handler-this-methods/_config.js new file mode 100644 index 0000000000..170ce46b0f --- /dev/null +++ b/test/generator/event-handler-this-methods/_config.js @@ -0,0 +1,16 @@ +export default { + test ( assert, component, target, window ) { + // Click events don't focus elements in JSDOM – obviously they would + // in real browsers. More realistically, you'd use this for e.g. + // this.select(), but that's harder to test than this.focus() + + const wont = target.querySelector( '.wont-focus' ); + const will = target.querySelector( '.will-focus' ); + + wont.dispatchEvent( new window.MouseEvent( 'click' ) ); + assert.equal( window.document.activeElement, window.document.body ); + + will.dispatchEvent( new window.MouseEvent( 'click' ) ); + assert.equal( window.document.activeElement, will ); + } +}; diff --git a/test/generator/event-handler-this-methods/main.html b/test/generator/event-handler-this-methods/main.html new file mode 100644 index 0000000000..a9f8282c9e --- /dev/null +++ b/test/generator/event-handler-this-methods/main.html @@ -0,0 +1,2 @@ + +