add click away on event

[goldcoders]

Is there a way you can add this little helper directive on svelte?
on:click|away , i think this is doable... and easy to implement

https://github.com/alpinejs/alpine/blob/master/src/directives/on.js#L7-L26

[antony]

Please use, not delete the issue template in future. You can implement this as an action, please see the API documentation on actions. This will not be implemented as an event modifier for on:click because it isn't an event modifier.

[goldcoders]

Documentation is very vague on this topic, i think this should be easy to implemenet like alpineJS...
Can you share a snippets a very quick and dirty example that would trigger an event for example clickAway

[antony]

See sveltejs/rfcs#24

[goldcoders]

For Other that might be looking for solution on this

U need to use bind this
first define an element u will use i.e. dropdownEl then add the event listener for click

let dropdownEl;
document.addEventListener("click", function (e) {
   
    if (dropdownEl != undefined) {
      if (dropdownEl.contains(e.target)) return;
      // Don't do anything if this element isn't currently visible.
      if (dropdownEl.offsetWidth < 1 && dropdownEl.offsetHeight < 1) return;
      dropdown = false;
      console.log("dropdown-close");
    }
  });

on your html Important U Add stopPropagation event modifier on click

<button on:click|stopPropagation={toggleDropdown}>
</button

<!-- YOUR DROPDOWN -->
<div  bind:this={dropdownEl}>
 </div>
``