如何停止 onClick 调用，在 Enter 单击事件上

问题描述

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

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

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

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

我尝试了以下方法：

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
      }
    );
  }

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

解决方法

我是这样解决的：

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