diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
index a1f231398b..030996bc32 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
@@ -1148,25 +1148,7 @@ function serialize_event_handler(node, metadata, { state, visit }) {
])
);
- if (handler.type === 'Identifier' || handler.type === 'MemberExpression') {
- const id = object(handler);
- const binding = id === null ? null : state.scope.get(id.name);
- if (
- binding !== null &&
- (binding.kind === 'state' ||
- binding.kind === 'frozen_state' ||
- binding.declaration_kind === 'import' ||
- binding.kind === 'legacy_reactive' ||
- binding.kind === 'derived' ||
- binding.kind === 'prop' ||
- binding.kind === 'bindable_prop' ||
- binding.kind === 'store_sub')
- ) {
- handler = dynamic_handler();
- } else {
- handler = /** @type {Expression} */ (visit(handler));
- }
- } else if (
+ if (
metadata?.contains_call_expression &&
!(
(handler.type === 'ArrowFunctionExpression' || handler.type === 'FunctionExpression') &&
@@ -1193,6 +1175,24 @@ function serialize_event_handler(node, metadata, { state, visit }) {
)
])
);
+ } else if (handler.type === 'Identifier' || handler.type === 'MemberExpression') {
+ const id = object(handler);
+ const binding = id === null ? null : state.scope.get(id.name);
+ if (
+ binding !== null &&
+ (binding.kind === 'state' ||
+ binding.kind === 'frozen_state' ||
+ binding.declaration_kind === 'import' ||
+ binding.kind === 'legacy_reactive' ||
+ binding.kind === 'derived' ||
+ binding.kind === 'prop' ||
+ binding.kind === 'bindable_prop' ||
+ binding.kind === 'store_sub')
+ ) {
+ handler = dynamic_handler();
+ } else {
+ handler = /** @type {Expression} */ (visit(handler));
+ }
} else if (handler.type === 'ConditionalExpression' || handler.type === 'LogicalExpression') {
handler = dynamic_handler();
} else {
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-element-event-handler/_config.js b/packages/svelte/tests/runtime-runes/samples/dynamic-element-event-handler/_config.js
new file mode 100644
index 0000000000..e3cc5ecde3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/dynamic-element-event-handler/_config.js
@@ -0,0 +1,26 @@
+import { test } from '../../test';
+
+export default test({
+ html: '
',
+
+ test({ assert, logs, target }) {
+ const [b1, b2, b3] = target.querySelectorAll('button');
+
+ b1?.click();
+ b2?.click();
+ b3?.click();
+ b1?.click();
+ b2?.click();
+
+ assert.deepEqual(logs, [
+ 'creating "Hello" handler for Tama',
+ 'Hello Tama',
+ 'creating "Hello" handler for Pochi',
+ 'Hello Pochi',
+ 'creating "Bye" handler for Tama',
+ 'Bye Tama',
+ 'creating "Bye" handler for Pochi',
+ 'Bye Pochi'
+ ]);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-element-event-handler/main.svelte b/packages/svelte/tests/runtime-runes/samples/dynamic-element-event-handler/main.svelte
new file mode 100644
index 0000000000..430be19126
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/dynamic-element-event-handler/main.svelte
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+