解决点击内部元素时JavaScript事件被外部元素覆盖的问题

问题本质 #

你遇到的是事件冒泡导致的冲突：点击内部的#logo-upload输入框时，事件会沿着DOM树向上传递，触发父元素.form-block-company-logo的点击事件，看起来像是内部事件被“覆盖”了。

具体解决方案 #

方案1：阻止内部事件冒泡 #

在#logo-upload的点击事件处理函数中，调用event.stopPropagation()，切断事件向上传递的路径，这样父元素的事件就不会被触发。示例代码：

document.getElementById('logo-upload').addEventListener('click', function(event) {
  // 阻止事件冒泡到父元素
  event.stopPropagation();
  // 执行company_logo_select的逻辑
  // 比如：标记表单元素开始使用的操作
});

方案2：在父元素事件中判断触发源 #

如果父元素的事件是必须保留的，也可以在父元素的事件处理函数里判断触发事件的目标元素，若目标是#logo-upload则跳过父元素的逻辑：

document.querySelector('.form-block-company-logo').addEventListener('click', function(event) {
  // 若点击的是内部的上传输入框，直接返回不执行父元素逻辑
  if (event.target.id === 'logo-upload') {
    return;
  }
  // 执行company_logo_add的逻辑
});

方案3：调整事件绑定逻辑 #

检查是否存在重复绑定事件的代码，比如在内部事件触发后又重新绑定了父元素的事件，这种情况需要清理重复的绑定逻辑，确保每个元素的事件只绑定一次。

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