Javascript 防止鼠标位于信息框内时拖动地图(但也允许文本高亮显示)

Javascript 防止鼠标位于信息框内时拖动地图(但也允许文本高亮显示),javascript,reactjs,google-maps,react-google-maps,Javascript,Reactjs,Google Maps,React Google Maps,我使用的是react google maps,我有一个信息框,在点击标记时打开,其中包含一些文本和输入字段 我进退两难,陷入了困境。我希望允许用户突出显示输入字段(在信息框中)中的文本 当前,在信息框中高亮显示/拖动鼠标将平移基础地图 我知道谷歌地图有一个手势处理选项,如果设置为'none',将阻止拖动。这对我来说是不可能的,因为当鼠标位于信息框内时,将gestureHandling设置为“无”也会阻止单击和选择输入字段 我已经尝试了,但拖动事件并没有为我公开一个“事件”,以便我以某种方式执行e

我使用的是
react google maps
,我有一个信息框,在点击标记时打开,其中包含一些文本和输入字段

我进退两难,陷入了困境。我希望允许用户突出显示输入字段(在信息框中)中的文本

当前,在信息框中高亮显示/拖动鼠标将平移基础地图

我知道谷歌地图有一个
手势处理
选项,如果设置为
'none'
,将阻止拖动。这对我来说是不可能的,因为当鼠标位于信息框内时,将gestureHandling设置为“无”也会阻止单击和选择输入字段

我已经尝试了
,但拖动事件并没有为我公开一个“事件”,以便我以某种方式执行
event.stopPropagation()
。因此,在允许信息框组件中的文本高亮显示时,是否可以有选择地仅关闭地图平移

例如:

我确实将
enableeventprogation
设置为
true
。将其设置为
false
会启用高亮显示,但会阻止类似于
onClick

的事件。我修改了它并将其集成到示例中。这包括:

  • 信息框
    组件上将
    启用事件传播
    设置为
    false
  • 向信息框内的按钮添加id(
    id=“counter button”
  • 将以下道具添加到InfoBox组件:

    onDomReady={() => {
      let counterButton = document.getElementById("counter-button");
      counterButton.addEventListener("click", props.onButtonClick);
    }}
    
请查看:

此外,这里还有一些链接可供进一步阅读:


我创建了一个;它有一个标记和一个信息窗口(带有输入元素),单击标记时会显示该窗口。当我突出显示输入元素中的文本或将鼠标拖动到信息框中的任何其他位置时,地图平移没有问题。你能做一个类似的示例应用程序,包括导致你的问题的代码吗?哇,谢谢你的示例!我已经分叉并修改了它以显示我的问题。这篇文章是在上面编辑的^^