j-click.js

j-click.js

document.addEventListener('alpine:init', () => {
    let isGlobalListenerAttached = false;

    const globalJClickHandler = (event) => {
        let target = event.target;

        const clickedElement = target.closest('[j-click]');
        if (!clickedElement) {
            return;
        }

        const alpineComponentRoot = Alpine.findClosest(clickedElement, el => el._x_dataStack);
        if (!alpineComponentRoot) {
            console.warn('j-click: Could not find parent Alpine component.', clickedElement);
            return;
        }

        const expressionToEvaluate = clickedElement.getAttribute('j-click');
        Alpine.evaluate(alpineComponentRoot, expressionToEvaluate, {
            scope: {
                '$event': event
            }
        });
    };

    if (!isGlobalListenerAttached) {
        document.addEventListener('click', globalJClickHandler, true); 
        isGlobalListenerAttached = true;
    }
});