Javascript React传单弹出窗口在移动设备上不起作用

我在应用程序中使用react传单，除非从移动设备（包括物理设备和开发工具）查看，否则它可以正常工作。在移动设备上，弹出窗口将出现，并在大约0.2秒后立即消失

需要注意的几点

• 如果我通过chrome开发工具在移动设备上刷新页面，然后切换到常规视图，那么问题仍然存在
• 出现此问题时，MapContainer似乎检测到两次单击事件。其中一个点击事件已

  被信任：flase，\u模拟：true

  。我认为这可能是问题的根源
• 单击弹出窗口时，可以在devtools中观察到以下div有一个子项，该子项立即被删除<代码>

以下是在中复制的问题。 如果单击按钮弹出浏览器窗口，将其切换为在dev tools中作为移动设备查看，然后刷新页面，您可以看到发生了什么

我的组件如下所示：

  export const MapView: React.FC<IMapViewProps> = ({
  ...
}) => {
 
  const Markers = data.map(({ location, name, id, events }) => (
    <Marker
      position={[location.lat, location.lon]}
      key={id}
      eventHandlers={{
        click: () => {
          console.log("clicked"); // THIS FIRES TWICE
        },
      }}
    >
      <Popup>
        <span>{name}</span>
      </Popup>
    </Marker>
  ));
    
  return (
    <div>
      <div>
        <br></br>
       IF I TAP HERE ONLY ONE CLICK EVENT IS RECORDED SO IT MUST BE IN THE MAPCONTAINER
        <br></br>
      </div>
      <MapContainer
        center={[55.9533, -3.1883]}
        zoom={10}
        scrollWheelZoom={false}
        style={{ height: "100vh" }}
        className={styles.container}
        doubleClickZoom
      >
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        {Markers}
      </MapContainer>
    </div>
  );
};

导出常量映射视图：React.FC=({
...
}) => {
const Markers=data.map（{location，name，id，events}）=>(
{
console.log（“clicked”）；//这会触发两次
},
}}
>
{name}
));
返回(



如果点击此处，则只记录一次单击事件，因此它必须位于MAPCONTAINER中



{Markers}
);
};

---

如果我能提供任何其他信息，请让我知道。谢谢。

正如@SethLutske所指出的，这个问题似乎源于

将

tap={false}

添加到MapContainer似乎解决了这个问题

 <MapContainer
    center={[55.9533, -3.1883]}
    zoom={10}
    scrollWheelZoom={false}
    style={{ height: "100vh" }}
    className={styles.container}
    doubleClickZoom
    tap={false}
  >
     ...
  </MapContainer>

...

我们可以了解更多详细信息吗：您正在测试哪些移动设备？您在该设备上运行的浏览器是什么？您使用什么开发工具在移动环境中进行调试？这是一个模拟环境还是一个你已经连接到你的应用程序的真实移动设备？在React传单演示上不可复制。您应该提供一个实时复制示例，例如使用CodeSandbox或StackBlitz。我可以通过独立预览和嵌入式查看器在safari中在iPhone 11上复制您的问题。即使在移动模式下使用devtools，我的笔记本电脑也没有问题。非常有趣的是@ghybs在android上对chrome没有问题……我在safari上的笔记本电脑上尝试了这个沙盒，弹出窗口甚至没有打开。签出-这是使用safari时报告的传单错误。@SethLutske我查看了该问题，添加tap={false}解决了该问题。谢谢大家！