如何在输入点击事件时停止 onClick 调用答案

【问题标题】：How to stop onClick invocation, on Enter click event如何在输入点击事件时停止 onClick 调用
【发布时间】：2021-04-21 20:04:31
【问题描述】：

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

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

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

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

我尝试了以下方法：

订阅 keyUp/keyDown 而不是 onKeyPress。
检查，在onClick订阅中，如果event.detail === 0，但在输入时也为0。
在onClick中，检查event.type === 'mousedown'，但总是等于'click'
订阅 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 应该简单地切换 popper 状态，而 onKeypress 应该根据所需行为的描述将其切换为打开状态？有点不清楚你说的问题是由什么引起的。是否是对 div 的制表符，然后单击它而不是按 Enter 键，这会导致某些东西双重调用？什么被调用了两次？
@DrewReese 你的第一个猜测是正确的，但我已经知道了，谢谢 :)

标签： javascript html reactjs react-tsx

【解决方案1】：

我是这样解决的：

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

【讨论】：