Concrete5添加区块对话框中Google Font Picker触发表单提交问题求助

我之前在Concrete5里集成第三方UI组件时也碰到过类似的事件冒泡问题，你的情况大概率是Google Font Picker的点击事件向上冒泡，触发了Concrete5表单对话框的默认提交行为。下面是几个可行的解决方法：

方法1：阻止字体选择器元素的事件冒泡 #

Google Font Picker的选项点击事件会向上传递到表单，导致表单意外提交。我们可以给字体选择器的交互容器添加事件监听，拦截事件冒泡：

// 请根据你实际的Font Picker DOM结构调整选择器
const fontPickerContainer = document.querySelector('.font-picker');
if (fontPickerContainer) {
  fontPickerContainer.addEventListener('click', function(e) {
    // 阻止事件向上冒泡到表单层级
    e.stopPropagation();
    // 如果是点击字体选项，确保不触发默认的表单提交行为
    if (e.target.closest('.font-picker__option')) {
      e.preventDefault();
    }
  });
}

方法2：限定表单提交仅由提交按钮触发 #

Concrete5的区块添加对话框默认可能会监听表单内的点击事件来触发提交，我们可以修改逻辑，让表单只有在点击明确的提交按钮时才执行提交：

// 找到目标表单和提交按钮（根据实际DOM结构调整选择器）
const blockForm = document.querySelector('form[data-block-form]');
const submitBtn = blockForm.querySelector('.btn-primary');

// 移除表单默认的提交监听（如果存在）
blockForm.removeEventListener('submit', () => {});

// 仅在点击提交按钮时提交表单
submitBtn.addEventListener('click', function(e) {
  e.preventDefault();
  blockForm.submit();
});

方法3：通过Font Picker的自定义回调处理选择逻辑 #

Google Font Picker提供了onChange回调，我们可以在初始化时直接处理字体选择，并确保不会触发表单提交：

// 初始化Font Picker时绑定自定义回调
const fontPicker = new FontPicker({
  apiKey: 'YOUR_GOOGLE_FONTS_API_KEY',
  pickerId: 'font-picker',
  onChange: function(selectedFont) {
    // 将选中的字体值同步到表单输入框
    document.querySelector('input[name="font"]').value = selectedFont.family;
    // 阻止事件冒泡，避免触发表单提交
    event.stopPropagation();
  }
});

额外调试提示 #

• 打开浏览器开发者工具（F12）的事件监听面板，查看表单元素上绑定的事件，确认是哪个事件触发了意外提交。
• 确保你的JS代码在DOM完全加载后执行，可以放在DOMContentLoaded事件监听中，或者Concrete5的ready回调里。

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