Materialize CSS下拉框在IE11中点击滚动条自动关闭问题求助

我之前在维护兼容IE11的项目时刚好碰到过这个问题，这确实不是Materialize独有的锅，本质是IE11对DOM事件的处理逻辑和现代浏览器不一样导致的。

问题根源 #

Materialize的下拉组件（包括select对应的下拉）是通过监听document上的点击事件来实现点击外部关闭下拉的逻辑。但在IE11里，点击下拉框的滚动条时，这个点击事件会被错误地识别为“外部点击”，冒泡到document上触发关闭；而Chrome、Firefox这些现代浏览器会正确判断滚动条属于下拉容器内部，不会触发外部关闭逻辑。

实测有效的解决方案 #

方案一：阻止滚动条点击事件冒泡

通过在捕获阶段监听点击事件，判断点击位置是否属于下拉滚动条区域，若是则阻止事件冒泡，避免触发document层面的关闭逻辑：

// 检测是否是IE11
const isIE11 = navigator.userAgent.indexOf('Trident/7.0') !== -1;

if (isIE11) {
  // 使用捕获阶段监听document点击
  document.addEventListener('click', function(e) {
    // 找到点击元素所属的下拉容器
    const dropdownContent = e.target.closest('.dropdown-content');
    if (!dropdownContent) return;

    // 判断下拉容器是否有滚动条
    const hasScrollbar = dropdownContent.scrollHeight > dropdownContent.clientHeight;
    if (!hasScrollbar) return;

    // 判断点击的是滚动条区域（横向滚动条同理，这里只处理纵向）
    const isVerticalScrollbarClick = e.clientX >= dropdownContent.offsetLeft + dropdownContent.clientWidth;
    
    if (isVerticalScrollbarClick) {
      e.stopPropagation(); // 阻止事件冒泡到document
    }
  }, true);
}

方案二：重写Materialize的下拉关闭方法

如果方案一不生效，可以直接修改Materialize内置的下拉关闭逻辑，给IE11添加特殊判断：

const isIE11 = navigator.userAgent.indexOf('Trident/7.0') !== -1;

if (isIE11) {
  // 保存原始的close方法
  const originalDropdownClose = M.Dropdown.prototype.close;
  
  // 重写close方法
  M.Dropdown.prototype.close = function(e) {
    const dropdownContent = this.el.nextElementSibling;
    // 判断是否是点击下拉滚动条
    const isScrollbarClick = dropdownContent && e.target.closest('.dropdown-content') && 
      e.clientX >= dropdownContent.offsetLeft + dropdownContent.clientWidth;
    
    if (isScrollbarClick) {
      return; // 不执行关闭操作
    }
    // 调用原始方法
    originalDropdownClose.call(this, e);
  };
}

额外提示 #

• 如果你用的是较旧版本的Materialize，可以尝试升级到最新的稳定版（虽然官方已经停止对IE11的维护，但部分版本可能修复了这类基础兼容问题）；
• 如果场景允许，也可以给下拉容器设置一个足够的固定高度，减少滚动条出现的概率，这算是一个临时的规避方案。

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