solid-primitives icon indicating copy to clipboard operation
solid-primitives copied to clipboard

why not delegated events?

Open JacobZwang opened this issue 1 year ago • 2 comments

When using Solid's native handlers such as onClick(), events are delegated. Handlers created in this library do not use delegated events and instead opts for native handlers. That means that if I were to call e.stopPropagation() inside a delegated event, it wold not perform as expected. The native listeners registered by this library would fire first even if they are watching a parent on the child who called e.stopPropagation(). I was able to solve this problem by creating my own makeDelegatedEventListener util.

import { addEventListener, delegateEvents } from "solid-js/web";

export const makeDelegatedEventListener = (
    node: Element,
    name: string,
    callback: (e: any) => void
) => {
    addEventListener(node, name, callback, true);
    delegateEvents([name]);
};

This makes bubbling work as expected. Why does this library not also delegate events or why does it not at least provide an option to? My quick implementation above may have flaws I'm unaware of since I made it by inspecting solid's source code, but at least on the surface it seems to work as I'd expect listeners to work, whereas all listeners created by this library do not.

JacobZwang avatar Mar 12 '23 17:03 JacobZwang