attachments

Clickoutside

Detects clicks outside a bound element and triggers a callback. Typically used to close dropdowns, modals, or popovers.

Show code

count: 0

click outside of me

Usage

<script>
    import { clickoutside } from 'svxui';
</script>

<div id="container">
    container

    <div
        {@attach clickoutside({
            // Enable/disable click outside detection
            enabled: true,
            // Limit detection to a parent element
            eventTarget: '#container',
            // Use custom trigger event
            eventType: 'pointerdown',
            // Ignore detection on one or more element
            ignoreElements: ['#ignored'],
            // Handle event
            onClickOutside: () => console.log('click outside')
        })}
    >
        content
    </div>

    <button id="ignored">Ignored button</button>
</div>

API Reference

ClickoutsideOptions

Property	Type	Default	Description
`onClickOutside`	`function`		Called when click outside is detected on target.
`enabled`	`boolean`	true	Enable/disable clickoutside
`ignoreElements`	`array`	[]	Elements to ignore in clickoutside detection. Can be an array of selector string or HTMLElement.
`eventType`	`union`	'pointerdown'	Type of event that triggers the clickoutside detection.
`eventTarget`	`union`	document	Element on which to listen for events instead of document.