如何在委托事件侦听器中支持 stopPropagation

Question

我查看了 jQuery 的源代码，以了解它们如何在委派事件侦听器中实现对 event.stopPropagation() 的支持，即 document.on(event, element...)，但似乎无法让我自己的 vanilla JS 实现完全工作。

我尝试在我的方法中覆盖原生 event.stopPropagation() 以简单地在事件本身上设置一个 event.propagationStopped，并在决定事件是否应该传播到其父级时寻找它。

当停止传播的事件侦听器附加在其他事件侦听器之前时，这有效，但是当它以相反的顺序附加时它不起作用，这在 jQuery 的实现中按预期工作。

function delegate(type, selector, callback) {
    document.addEventListener(type, function(event) {
        event.stopPropagation = function() {
            event.propagationStopped = true;
        };

        var element = event.target, found;

        while (element && element.parentNode) {
            if (element.matches(selector)) {
                callback.call(element, event);
            }

            if (!event.propagationStopped) {
                element = element.parentNode;
            } else {
                break;
            }
        }
    });
}


delegate('click', '.overlay', function() {
    console.log('Close overlay');
});

delegate('click', '.modal', function(e) {
    e.stopPropagation();

    console.log('Clicked inside modal, stopping propagation...');
});

我希望事件停止在所有事件侦听器中的进一步传播，而不管它们的附加顺序如何，而不是当前的行为。

Answer 1

我认为这只能通过自己在单个事件侦听器中进行委托事件传播来实现。在您当前的实现中，附加到 document 的第二个侦听器总是第二个触发，无论其选择器如何 - 但是当它选择另一个选择器的后代时，您需要先触发它。

在这里，我正在收集委托事件侦听器的列表，然后为您的父遍历中的每个元素对其进行迭代。您可以将列表保留在元素本身上（例如，使用符号或 WeakMap），但由于您只在 document 上委托，我将简单地将它们存储在全局范围内。

const delegatedListeners = {};

function delegate(type, selector, callback) {
    if (!delegatedListeners[type]) {
        const listeners = delegatedListeners[type] = [];
        document.addEventListener(type, function(event) {
            for (let element = event.target; element && element.parentNode; element = element.parentNode) {
                // unfortunately, event.currentTarget cannot be overwritten with element
                for (const {selector, callback} of listeners) {
                    if (element.matches(selector)) {
                        callback.call(element, event);
                    }
                }
                if (event.cancelBubble) { // a getter for the propagation stopped flag :-)
                    break;
                }
            }
        });
    }
    delegatedListeners[type].push({selector, callback});
}