如何停止 onClick 调用，在输入点击事件

Question

我有一个订阅了 onClick 和 onKeyPress 的 div（输入点击）。

鼠标单击所需的行为是：第一次单击 - 打开弹出窗口，第二次单击 - 关闭弹出窗口。

输入点击所需的行为是：打开弹出窗口。

当将焦点切换到 div 并单击 enter 时，订阅的方法会被触发两次，并且只需要触发一次。 因为，相同的 function 在输入点击时被调用两次，它打开和关闭弹出窗口。

我尝试了以下方法：

1. 订阅 keyUp/keyDown 而不是 onKeyPress。
2. 检查，在onClick订阅中，如果event.detail === 0，但它是0，当回车点击也。
3. 在 onClick 中，检查 event.type === 'mousedown'，但它总是等于 'click'
4. 订阅 onMouseDown/Up 而不是 onClick，输入点击停止工作。

这是触发事件的组件

const eventPressHandler = e => {
    if (e.key === 'Enter') {
      return handleEventClick(e, true);
    }

    if (e.key === 'Tab' || (e.shiftKey && e.key === 'Tab')) {
      return closeExpanded();
    }
  }

  return (
    <>
      <div
        onClick={handleEventClick}
        onKeyPress={eventPressHandler}
        className={st(
          classes.root,
          { isAllDay, isInPopper, isMultiDay, isMobile, isAgenda, isCut, isWeekend },
          className
        )}
      >
        {event}
      </div>
      {popper}
    </>
  )
};

这是父组件中的处理程序：

const handleEventClick = (eventElement, isKeyClicked) => {
    isKeyClicked && setIsEventEventEntered(true);
    setExpanded(
      expanded || type === EventTypes.ShowMore ?
        null :
        eventElement.currentTarget,
      () => {
        onEventExpanded && onEventExpanded(expandedData) // i use custom hook to fire functions after the setState
      }
    );
  }

我查看了很多类似的问题，但没有一个有适合我的解决方案。

Answer 1

我这样解决了：

onClick={e => e.detail === 1 && handleEventClick(e) }
onKeyUp={eventPressHandler}