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!

[eltigerchino]

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} />