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