点击空白处收起,不影响焦点和点击事件(需求稍有复杂,已配图)

Question

目前已经实现的功能:点击按钮保留光标(通过阻止onMouseDown来防止焦点移动)

待实现的功能:
3所在位置的需求:点击富文本编辑器的其他位置,光标移动,且收起已经展开的列表

请问如何实现?

目前已经尝试过的解决方案:
点击按钮后展开列表的同时添加一个覆盖整个页面的透明遮罩,并添加pointer-events: none使得鼠标穿透, 此时光标正常移动,但无法触发让列表收起的事件了;
如果不添加pointer-events:none, 列表可以收起,但光标无法正常移动

按钮部分的核心代码如下(react的代码, 有原生的实现方式也可以)

 const [showDropdownList, setShowDropdownList] = useState(false);
  const handleOnMouseDown = (e) => {
    e.preventDefault();//防止失去焦点
  };
 const handleOnClick = (e) => {
    setShowDropdownList((i) => !i);//让列表展开的一个事件
  };
  return (
    <div onMouseDown={(e) => e.preventDefault()}>
      <button
        onMouseDown={handleOnMouseDown}
        onClick={handleOnClick}
      >
        {selectedItem.label}
      </button>
      <div className={`dropdown-content ${showDropdownList ? "show" : ""}`}>
        {data.list.map((cur) => {
          return <div key={cur.order}>{cur.label}</div>;
        })}
      </div>
      <div
        className={`mask ${showDropdownList ? "show" : ""}`}
        onMouseDown={(e) => {
          //FIXME
          e.preventDefault();
          setShowDropdownList((i) => !i);
        }}
      ></div>
    </div>
  );

Answer 1

我不知道你为什么要这么做，可能是想自己开发编辑器？如果是练习请继续，想实用的话建议先找个编辑器用一段时间，很多解法大家都踩过雷，不需要全都自己摸索。

比如这个功能，据我所知，codemirror 和 Monaco 的光标都是自己画的，不是真实光标。