React+FluentUI事件冒泡的问题

Question

const handleClickOutside = useCallback((event) => {
debugger
if (comboboxRef.current && !comboboxRef.current.contains(event.target)) {
debugger
onHidecombxo();//触发隐藏
}
}, [onHidecombxo]);

useEffect(() => {
document.addEventListener('mouseup', handleClickOutside);
return () => document.removeEventListener('mouseup', handleClickOutside);
}, [handleClickOutside]);
以上代码是屏幕任意地方点击隐藏元素 点击下拉框的时候就不隐藏元素

<div
ref={comboboxRef} // 添加 ref
>
<Combobox

          aria-labelledby={comboId}
          {...props}
          styles={comboBoxStyles} // 直接在组件内调整宽度
          className="user-combox"
          onClick={(event) => {
            event.stopPropagation(); // 阻止事件传播
            handcombox(event);
          }}   
        >
          {options.map((option) => (
            <Option key={option} disabled={option === "Ferret"}
            className={styles.combox}
            onClick={(event) => {
              event.stopPropagation(); // 阻止事件传播
              onOptioncomboxdata(option);
            }}
            >
              {option}
            </Option>
          ))}
        </Combobox>
    </div>

描述：下拉框我明明是放在同一个div里面包裹起来的
我点击下拉都可以不触发隐藏操作 为啥我选择下拉框数据的时候就触发了隐藏操作

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

问题分析

你使用 React + FluentUI，遇到了事件冒泡的问题。具体来说，你定义了一个 handleClickOutside 函数，用于处理点击外部区域的事件，但是事件冒泡导致了意外的行为。

解决方案

1. 使用 event.stopPropagation()：在 handleClickOutside 函数中，使用 event.stopPropagation() 来阻止事件冒泡。
2. 使用 event.preventDefault()：如果事件是由浏览器触发的（例如点击链接），则使用 event.preventDefault() 来阻止默认行为。
3. 检查事件目标: 确保事件目标是正确的组件或元素，避免事件冒泡到不需要的组件。

核心代码

const handleClickOutside = useCallback((event) => {
  event.stopPropagation(); // 阻止事件冒泡
  // ...
}, []);

注意: 上述代码仅提供了一个解决方案，具体的实现可能需要根据你的项目结构和需求进行调整。