通过Select元素触发Elementor弹窗，Windows端弹窗闪退求助

我实现了一个功能：当用户更改<select>选项时，打开对应的Elementor弹窗。代码在Mac的Safari、Chrome、Opera中运行正常，但在Windows系统的浏览器里，弹窗刚打开就立刻关闭。代码如下：

<select name="forma" id="forma">
    <option value="">Je veux devenir...</option>
    <option value="185">Boucher(ère)</option>
    <option value="221">Boulanger(ère)</option>
    <option value="224">Charcutier(ère)</option>
</select>

<script>
jQuery('#forma').on('change', function() {
    elementorProFrontend.modules.popup.showPopup( { id: this.value } );
});
</script>

解决方案 #

这个问题通常是Windows浏览器中<select>的change事件触发后，浏览器焦点处理或事件循环逻辑与Elementor弹窗初始化存在冲突，导致弹窗被意外关闭。可以通过以下方式修复：

1. 非空判断+延迟执行（推荐） #

先判断选中的选项值不为空，再延迟一小段时间调用弹窗显示方法，确保浏览器完成当前事件处理流程后再初始化弹窗：

jQuery('#forma').on('change', function() {
    const popupId = this.value.trim();
    if (popupId) {
        setTimeout(() => {
            elementorProFrontend.modules.popup.showPopup({ id: popupId });
        }, 100);
    }
});

2. 阻止事件冒泡与默认行为 #

部分场景下，<select>的change事件可能冒泡到父元素，触发其他影响弹窗的事件，通过阻止冒泡和默认行为可以避免冲突：

jQuery('#forma').on('change', function(e) {
    e.preventDefault();
    e.stopPropagation();
    
    const popupId = this.value.trim();
    if (popupId) {
        elementorProFrontend.modules.popup.showPopup({ id: popupId });
    }
});

3. 组合方案 #

将两种方式结合，覆盖更多可能的冲突场景：

jQuery('#forma').on('change', function(e) {
    e.preventDefault();
    e.stopPropagation();
    
    const popupId = this.value.trim();
    if (popupId) {
        setTimeout(() => {
            elementorProFrontend.modules.popup.showPopup({ id: popupId });
        }, 100);
    }
});

原因说明 #

Windows浏览器（尤其是Chromium内核的Chrome、Edge等）处理<select>的change事件时，焦点切换时机与Mac浏览器存在差异。Elementor弹窗的初始化逻辑可能在焦点变化过程中被误触发关闭机制，延迟执行可让浏览器先完成<select>的状态更新和焦点处理，再启动弹窗；阻止事件冒泡则避免父元素的事件干扰弹窗正常显示。

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