How can make a conditional on:click argument?

[205g0]

i.e. I have a <Component on:click={() => console.log() /> which is called in follwing div...

<div on:click> // <= I want to make this `on:click` arg conditional
  <Component />
</div>

So basically, I want want to make on:click on the call level optional but once I pass something it will think it's the actual on:click function. Hope I've been clear. Thanks!

[NormandoHall]

Why not wrap in an {#if} block?

{#if variableToCheck}
  <div on:click> // <= I want to make this `on:click` arg conditional
    <Component />
  </div>
{/if}

Or you can check inside the component the conditional variable to handle or not

[205g0]

Wouldn't work for my use case (check my other reply) but thanks!

[teemingc]

Do you meant to conditionally check and add the event listener? The on:click directive for svelte isn't optional at the moment.
(see a list of event directive modifiers here).

<script script="ts">
  import { onMount } from 'svelte';

  let element: HTMLElement;

  onMount(() => {
    if (conditional) {
      element.addEventListener('click', () => {
        // ...
      })
    }
  })
</script>

<div bind:this={element}>
  <Component />
</div>

Unless you want to do the conditional check in the function itself where the event listener is already added.

<div on:click={() => {
    if (conditional) {
       // ...
    }
  }}>
  <Component />
</div>

[205g0]

First idea is good for my use case (which is disabled button elements (not <button />) which should not process the click).

[neopointer]

In svelte 5 I did like this, but not sure if that's what you meant.

<input onclick={inputOnClick ?? undefined} />

[mateothegreat]

It'd be easy to throw the problem at an attachment!

<script>
    let isActive = $state(true);

    const clickable = (node) => {
        const handleClick = () => {
            alert('Clicked!');
        }

        // Track current active state INSIDE:
        $effect(() => {
            if (isActive) {
                node.addEventListener('click', handleClick);
            } else {
                node.removeEventListener('click', handleClick);
            }
        });

        return {
            destroy() {
                node.removeEventListener('click', handleClick);
            }
        };
    };

    const toggle = () => {
        isActive = !isActive;
    };
</script>

<button onclick={toggle}>
    Toggle clickable (currently {isActive ? 'on' : 'off'})
</button>

<div use:clickable>
    Click me? (I'm {isActive})
</div>

See https://svelte.dev/playground/ea5be303525349fa88820fd1c1c2e11f?version=5.38.2.

[brunnerh]

(That is an "action", not an "attachment" which use @attach.)