如何避免Fluent UI ListView中Mgt Person Card展开时自动选中行

问题根源在于Fluent UI ListView的多选逻辑会监听行内的mousedown事件，当PersonCard展开后，卡片内部的鼠标事件会向上冒泡到ListView行，触发自动选中。你当前仅阻止了默认行为，还需要切断事件冒泡链路来解决这个问题。

修复方案 #

修改外层容器的事件处理，同时阻止默认行为和事件冒泡，额外补充click事件的冒泡阻止：

<div 
  className="personprofile" 
  onMouseDown={(event) => {
    event.preventDefault();
    event.stopPropagation();
  }}
  onClick={(event) => event.stopPropagation()}
>
  <Person
    userId={id}
    personCardInteraction={PersonCardInteraction.hover}
    fallbackDetails={personDetails}
  >
    <CustomPersonCard template="person-card" />
  </Person>
</div>

说明 #

• event.stopPropagation()：阻止鼠标事件向上传递到ListView的行元素，让ListView的多选逻辑无法捕获到触发选中的事件
• event.preventDefault()：避免浏览器默认的文本选中行为干扰交互
• 新增onClick阻止冒泡：部分ListView多选配置会响应click事件，提前阻断可以避免边缘场景下的误选中

如果上述方案仍有问题，可以直接给<Person>组件添加事件阻止，确保卡片内部的所有鼠标事件不会向外传递：

<Person
  userId={id}
  personCardInteraction={PersonCardInteraction.hover}
  fallbackDetails={personDetails}
  onMouseDown={(e) => {
    e.stopPropagation();
    e.preventDefault();
  }}
  onClick={(e) => e.stopPropagation()}
>
  <CustomPersonCard template="person-card" />
</Person>

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