父元素event.stopPropagation导致子元素点击事件失效问题求助

问题描述 #

自定义下拉菜单（通过singleMenu函数实现）内部嵌套了使用nice-select插件渲染的select元素，点击该select无法展开下拉列表，但通过回车键、方向键可正常操作。移除menuElement上的event.stopPropagation()后，select能展开，但父级下拉菜单会立即关闭。

核心原因 #

1. 原代码中menuElement的event.stopPropagation()会阻止点击事件向上冒泡，而nice-select插件内部依赖事件冒泡触发展开逻辑，导致点击失效；
2. 移除该阻止冒泡后，点击select触发的事件会冒泡到document的点击监听，触发父下拉菜单的关闭逻辑。

解决方案 #

方案1：优化父下拉的外部点击判断逻辑 #

修改singleMenu函数中的document点击监听，忽略nice-select相关元素的点击，同时移除menuElement上的event.stopPropagation()。

修改后的singleMenu函数：

function singleMenu(targetId, menuId, show = false) {
    const targetElement = document.getElementById(targetId);
    const menuElement = document.getElementById(menuId);

    // Initial state
    if (show) {
        menuElement.style.display = "block";
        targetElement.classList.add("active");
    } else {
        menuElement.style.display = "none";
        targetElement.classList.remove("active");
    }

    // Toggle menu visibility when target element is clicked
    targetElement.addEventListener("click", () => {
        show = !show;

        if (show) {
            menuElement.style.display = "block";
            targetElement.classList.add("active");
        } else {
            menuElement.style.display = "none";
            targetElement.classList.remove("active");
        }
    });

    // Close menu if clicked outside of container AND not clicking nice-select
    document.addEventListener("click", (event) => {
        // 检查点击目标是否属于nice-select组件
        const isClickingNiceSelect = event.target.closest('.nice-select') !== null;
        if (!targetElement.contains(event.target) && !isClickingNiceSelect) {
            show = false;
            menuElement.style.display = "none";
            targetElement.classList.remove("active");
        }
    });

    // 移除原menuElement的stopPropagation，让nice-select事件正常冒泡
    // menuElement.addEventListener("click", function (event) {
    //     event.stopPropagation();
    // });

    // Calculate half of the targetElement width
    const targetHalfWidth = targetElement.offsetWidth / 2;

    // Set a CSS variable with the half width value
    targetElement.style.setProperty(
        "--target-half-width",
        targetHalfWidth + "px"
    );
}

方案2：单独处理nice-select的点击事件 #

保留父下拉的阻止冒泡逻辑，给nice-select的触发元素添加独立的点击处理，手动控制展开状态并阻止事件冒泡到父菜单。

修改初始化代码：

$(document).ready(function () {
    // Apply the niceSelect plugin to all select elements
    $("select").niceSelect();
    
    // 处理nice-select的点击事件
    $('.nice-select').on('click', function(e) {
        // 阻止事件冒泡到父级menuElement，避免父下拉关闭
        e.stopPropagation();
        // 手动切换nice-select的展开/收起状态
        $(this).toggleClass('open');
    });

    // 处理nice-select选项的点击事件，确保选择后正常关闭并阻止冒泡
    $('.nice-select .list li').on('click', function(e) {
        e.stopPropagation();
        const $select = $(this).closest('.nice-select');
        // 触发原select的change事件（模拟nice-select的默认行为）
        $select.prev('select').val($(this).data('value')).trigger('change');
        $select.removeClass('open');
    });
});

说明 #

方案1更简洁通用，无需额外处理nice-select的内部逻辑；方案2适合需要保留父菜单整体阻止冒泡的场景。两种方案都能实现：点击nice-select正常展开，同时父级下拉菜单不会关闭。

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