如何处理无处理器的自定义事件？拖拽库beforeDrop执行问题

问题核心 #

你遇到的是原生事件监听顺序不可控的问题，定时器方案依赖浏览器事件循环实现，跨浏览器表现不一致，并非可靠解决方式。以下是两种可行的替代方案：

方案一：利用自定义事件的可取消特性，事件触发后执行默认逻辑 #

将默认放置逻辑从事件监听器中移出，放到事件触发后的同步代码里，确保用户的监听器先执行完毕，再由库决定是否执行默认操作。

库侧代码修改 #

// 内部放置逻辑
function doDrop(detail) {
    console.log('library: before drop: ' + detail.from + ' to ' + detail.to);
    // 这里编写实际的拖拽放置逻辑
}

// 触发beforeDrop事件的核心逻辑
function triggerBeforeDrop(fromDetail, toDetail) {
    // 创建可取消的自定义事件，同时在detail中提供手动触发放置的方法
    const event = new CustomEvent('beforeDrop', {
        cancelable: true,
        detail: {
            from: fromDetail,
            to: toDetail,
            // 给用户提供手动执行放置的入口
            proceed: () => doDrop({ from: fromDetail, to: toDetail })
        }
    });

    // 触发事件，此时所有用户绑定的监听器会同步执行
    document.dispatchEvent(event);

    // 事件执行完成后，检查是否被用户阻止，未阻止则执行默认放置
    if (!event.defaultPrevented) {
        doDrop({ from: fromDetail, to: toDetail });
    }
}

用户侧使用示例 #

// 用户绑定beforeDrop事件
document.addEventListener('beforeDrop', (e) => {
    // 根据detail数据判断是否允许放置
    if (e.detail.from === 'invalid-source') {
        // 阻止默认放置逻辑执行
        e.preventDefault();
        return;
    }

    // 也可以手动调用proceed提前执行放置，同时阻止默认逻辑避免重复执行
    // e.detail.proceed();
    // e.preventDefault();
});

方案二：封装库专属的钩子系统（更可控） #

放弃依赖原生事件的监听顺序，改为由库维护钩子列表，用户通过库提供的API添加钩子，库保证先执行用户钩子，再执行默认逻辑。

库侧代码修改 #

// 内部维护beforeDrop钩子队列
const beforeDropHooks = [];

// 暴露给用户的钩子注册方法
export function onBeforeDrop(callback) {
    beforeDropHooks.push(callback);
}

// 内部放置逻辑
function doDrop(detail) {
    console.log('library: before drop: ' + detail.from + ' to ' + detail.to);
    // 实际放置逻辑
}

// 触发钩子的核心逻辑
async function triggerBeforeDrop(fromDetail, toDetail) {
    let shouldProceed = true;
    const hookContext = {
        from: fromDetail,
        to: toDetail,
        // 提供阻止默认逻辑的方法
        preventDefault: () => { shouldProceed = false; },
        // 提供手动执行放置的方法
        proceed: () => doDrop({ from: fromDetail, to: toDetail })
    };

    // 依次执行所有用户钩子，支持异步钩子
    for (const hook of beforeDropHooks) {
        const hookResult = await hook(hookContext);
        // 如果钩子返回false，也标记为阻止默认逻辑
        if (hookResult === false) {
            shouldProceed = false;
        }
    }

    // 所有钩子执行完毕后，执行默认逻辑（如果未被阻止）
    if (shouldProceed) {
        doDrop({ from: fromDetail, to: toDetail });
    }
}

用户侧使用示例 #

// 用户通过库的API注册钩子
onBeforeDrop((ctx) => {
    if (ctx.from === 'invalid-source') {
        ctx.preventDefault();
        return;
    }

    // 或者手动触发放置
    // ctx.proceed();
    // ctx.preventDefault();
});

方案一更贴近原生事件使用习惯，方案二更灵活可控（支持异步钩子），可根据你的库的设计风格选择。

内容的提问来源于stack exchange，提问作者quilkin