javascript - react : onClick on Mobile (iPhone) requires 2 taps?

Question

Video demonstrating issue

我有一堆可点击的组件，当点击它们时，会在一行中添加一个“卡片”。在台式机上，它工作正常，但在移动设备上(在 iPhone 上测试，似乎对 Android 平板电脑不是问题)，它需要连续点击同一按钮 2 次才能触发 onClick功能。

这些组件还有onMouseEnter/onMouseLeave对它们产生影响，以控制全局状态，这反过来又决定了几个组件是否应该应用额外的 CSS(所以我不能让它成为一个简单的 CSS 悬停效果)。

我相信鼠标效果会干扰点击事件，但我不知道如何解决这个问题。这是该组件的相关代码:

const CardSource = ({ addCard, note, setHoveredNote, hoveredNote }) => {
  return (
    <Source
      onClick={() => addCard(note)}
      onMouseEnter={() => setHoveredNote(note)}
      onMouseLeave={() => setHoveredNote(null)}
      className={
        hoveredNote && hoveredNote.index === note.index ? "highlight" : null
      }
    >
      {note.letters[0]}
    </Source>
  );
};

此外 ，一旦一个按钮被点击了两次，悬停效果 CSS 就会“粘”在那个按钮上，并且永远不会移动到另一个按钮上。这似乎发生在 iPhone 和 Android 平板电脑上。我也希望不再发生这种情况。

我在沙盒中创建了这个问题的工作演示，如果在移动设备上查看，您应该能够重新创建这些问题: https://codesandbox.io/s/mobile-requires-2-taps-i9zri?file=/src/Components/CardSource/CardSource.js

Answer 1

您的代码的问题可能是，您使用的鼠标事件是 不起泡 . e.g. mouseenter event .

您可能想尝试使用 onMouseOver 的事件冒泡解决方案而不是 onMouseEnter , 和 onMouseOut而不是 onMouseLeave .

const CardSource = ({ addCard, note, setHoveredNote, hoveredNote }) => {
  return (
    <Source
      onClick={() => addCard(note)}
      onMouseOver={() => setHoveredNote(note)}
      onMouseOut={() => setHoveredNote(null)}
      className={
        hoveredNote && hoveredNote.index === note.index ? "highlight" : null
      }
    >
      {note.letters[0]}
    </Source>
  );
};

如果上述方法不起作用，您可以使用事件类型进行调试并基于它执行事件处理。例如

const CardSource = ({ addCard, note, setHoveredNote, hoveredNote }) => {
  const eventHandler = (event) => {
     const { type, bubbles } = event;
     switch(type) {
         case "mouseover":
         case "mouseenter":
              setHoveredNote(note);
              break;
         case "mouseout":
         case "mouseleave":
              setHoveredNote(null);
         case "click":
              addCard(note);
              if (bubbles) { // handle hover state
                 setHoveredNote(note);
              }
              break;
         default:
             break;
     }
  }

  const onClick = (event) => eventHandler(event);
  const onMouseOver = (event) => eventHandler(event);
  const onMouseOut = (event) => eventHandler(event);

  return (
    <Source
      onClick={onClick}
      onMouseOver={onMouseOver}
      onMouseOut={onMouseOut}
      className={
        hoveredNote && hoveredNote.index === note.index ? "highlight" : null
      }
    >
      {note.letters[0]}
    </Source>
  );
};

Also note that, providing arrow functions as props creates new instance of the function on every render. So better use bind in that case or just function references that capture the arguments.