I have created a custom event handling function like this:
/** Trigger an event when clicking outside of a specific node */
export function eventHandlers(node: HTMLElement) {
const handleClick = (event: MouseEvent) => {
if (node && !node.contains(event.target as Node)) {
node.dispatchEvent(
new CustomEvent('click_outside')
)
}
};
document.addEventListener('click', handleClick, true);
return {
destroy() {
document.removeEventListener('click', handleClick, true);
}
}
}
However, when I tried to integrate it into the HTML code (using Svelte), I encountered an error:
Argument of type
is not assignable to parameter of type{ class: string; "on:click_outside": (event: MouseEvent) => void; }300 moreOmit<Omit<HTMLLiAttributes, "pattern" | "style" | "title" | "cite" | "data" | "form" | "label" | "slot" | "span" | "summary" | "id" | "class" | "accesskey" | ...
The Svelte HTML code causing the issue looks like this:
function handleClickOutside(event) {
alert('Clicking outside!');
}
<h1>Hello {name}!</h1>
<div use:clickOutside on:click_outside={handleClickOutside}>
Click outside me!
</div>
Can someone explain what this error means and provide a solution?