如何阻止mgt-file-list组件点击文件夹时打开新窗口？

针对你遇到的问题，有两种可行的实现方式：

方法一：通过事件委托拦截文件夹点击行为 #

利用事件委托捕获组件内的点击事件，判断目标为文件夹时阻止默认打开新窗口的行为：

// 获取mgt-file-list组件实例
const fileList = document.querySelector('mgt-file-list');

// 监听点击事件
fileList.addEventListener('click', (e) => {
  // 定位到对应的列表项元素
  const listItem = e.target.closest('.mgt-file-list-item');
  if (!listItem) return;

  // 解析列表项绑定的文件/文件夹数据
  const item = listItem.dataset.item ? JSON.parse(listItem.dataset.item) : null;
  
  // 判断是否为文件夹，是则阻止默认行为
  if (item && item.folder) {
    e.preventDefault();
    e.stopPropagation();
    
    // 可选：添加自定义文件夹点击逻辑，比如加载子文件夹内容
    // fileList.loadFolder(item.id);
  }
});

方法二：自定义列表项模板完全控制点击逻辑 #

通过组件的template属性自定义列表项，为文件和文件夹分别设置点击行为：

<mgt-file-list>
  <template data-type="item">
    <div class="custom-file-item" @click=${(event, item) => handleItemClick(event, item)}>
      <mgt-icon :icon="${item.folder ? 'folder' : 'document'}"></mgt-icon>
      <span>${item.name}</span>
    </div>
  </template>
</mgt-file-list>

<script>
function handleItemClick(event, item) {
  if (item.folder) {
    // 阻止文件夹的默认打开行为
    event.preventDefault();
    event.stopPropagation();
    
    // 自定义文件夹操作，比如加载子文件夹
    const fileList = event.target.closest('mgt-file-list');
    fileList.loadFolder(item.id);
  } else {
    // 文件保持在新窗口打开
    window.open(item.webUrl, '_blank');
  }
}
</script>

两种方法都能实现需求：方法一无需修改组件原有渲染结构，适合快速拦截；方法二灵活性更高，可完全自定义列表项的样式和交互逻辑。

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