bind this in bubbled events (#6417)

pull/6314/head
Tan Li Hau 4 years ago committed by GitHub
parent b9e19004cb
commit 7d39e676c5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -20,7 +20,7 @@ export default class EventHandlerWrapper {
this.parent.renderer.component.partly_hoisted.push(b`
function ${node.handler_name.name}(event) {
@bubble($$self, event);
@bubble.call(this, $$self, event);
}
`);
}

@ -65,6 +65,7 @@ export function bubble(component, event) {
const callbacks = component.$$.callbacks[event.type];
if (callbacks) {
callbacks.slice().forEach(fn => fn(event));
// @ts-ignore
callbacks.slice().forEach(fn => fn.call(this, event));
}
}

@ -0,0 +1,7 @@
<script>
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
</script>
<button on:click={() => dispatch('bar')} />

@ -0,0 +1,6 @@
<script>
import Inner from './Inner.svelte';
</script>
<button on:click>click me</button>
<Inner on:bar />

@ -0,0 +1,11 @@
export default {
test({ assert, component, target, window }) {
const [button1, button2] = target.querySelectorAll('button');
button1.dispatchEvent(new window.MouseEvent('click'));
button2.dispatchEvent(new window.MouseEvent('click'));
assert.strictEqual(component.logs[0], button1);
assert.ok(component.logs[1] instanceof component.Inner);
}
};

@ -0,0 +1,16 @@
<script>
import Widget from './Widget.svelte';
import Inner from './Inner.svelte';
export let logs = [];
export { Inner };
function foo() {
logs.push(this);
}
function bar() {
logs.push(this);
}
</script>
<Widget on:click={foo} on:bar={bar} />
Loading…
Cancel
Save