如何使事件 DOM 侦听器适应 Google Maps JavaScript API v3.35

2024-05-05

我曾经使用以下代码来捕获用户的 Enter 键事件,如果用户没有选择其中任何一个(即没有标记为 pac 的 pac-item),则自动从自动完成结果(pac-items)中选择第一个结果- 项目选择)。

var input = document.getElementById('pac-input')
var autocomplete = new google.maps.places.Autocomplete(input)

google.maps.event.addDomListener(input, 'keypress', function(e) {
    if (e.keyCode===13 && !e.triggered) {
        var suggestion_selected = document.querySelectorAll('.pac-item-selected').length > 0
        if (!isLatLngInInputBox && !suggestion_selected) {
            google.maps.event.trigger(this,'keydown',{keyCode:40})
            google.maps.event.trigger(this,'keydown',{keyCode:13,triggered:true})
        }
    }
})

但是,从 Google Maps JavaScript API v3.35 开始,我会收到如下错误Uncaught TypeError: a.stopPropagation is not a function提出的线google.maps.event.trigger(this,'keydown',{keyCode:40}).

结果我检查了文档,发现google.maps.event的触发方法发生了变化。第三个参数现在表示为 eventArgs 而不是 var_args。

我试图弄清楚如何适应它并修改了代码,例如:

google.maps.event.addDomListener(input, 'keypress', function(e) {
    console.log(e.key)
    if (e.key==="Enter" && !e.triggered) {
        var suggestion_selected = document.querySelectorAll('.pac-item-selected').length > 0
        if (!isLatLngInInputBox && !suggestion_selected) {
            google.maps.event.trigger(this,'keydown',{key:"ArrowDown"})
            google.maps.event.trigger(this,'keydown',{key:"Enter",triggered:true})
        }
    }
})

虽然可以完美捕获 Enter 键,但 ArrowDown 键却无法按预期工作。

事实上,我可以捕获 ArrowDown 键console.log(e.key),但实际上什么也没发生。还,console.log(e.key)当我按下键盘上的 ArrowDown 键时,没有捕捉到任何内容,这让我很困惑。

有人遇到类似的问题吗?感谢您的任何建议!


Use new Event()创建正确的事件对象作为第三个参数keydown代替keypress在你的addDomListener

var input = document.getElementById('pac-input')
var autocomplete = new google.maps.places.Autocomplete(input)
google.maps.event.addDomListener(input, 'keydown', function(e) {
  var suggestion_selected = document.querySelectorAll('.pac-item-selected').length > 0
  if (suggestion_selected) {
    console.log(document.querySelectorAll('.pac-item-selected'));
  } else {
    if (e.key === "Enter" && !e.triggered) {
      var ex1 = new Event('keydown');
      ex1.code = "ArrowDown";
      ex1.key = "ArrowDown";
      ex1.keyCode = 40;
      google.maps.event.trigger(this, 'keydown', ex1);

      var ex2 = new Event('keydown');
      ex2.code = "Enter";
      ex2.key = "Enter";
      ex2.keyCode = 13;
      ex2.triggered = true;
      google.maps.event.trigger(this, 'keydown', ex2);
    }
  }
});

Edit:

我这里有一个工作小提琴https://jsfiddle.net/ergec/e6wsdb85/ https://jsfiddle.net/ergec/e6wsdb85/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使事件 DOM 侦听器适应 Google Maps JavaScript API v3.35 的相关文章

随机推荐

  • vscode 在哪里使用 lldb 可执行文件?

    我在 vscode 中调试 rust 时遇到困难 它无法评估任何涉及函数的表达式 我注意到我没有安装 lldb Ubuntu 20 04 但调试器仍在运行 在哪里可以找到 lldb 可执行文件 我可以改变路径吗 None
  • 使用 CSS3 计算值

    CSS3有没有办法实现这一点 height 100 110px 我的背景 你不能用纯 CSS 来计算它 正如 Litek 提到的 它不适用于所有浏览器 但是有一种组织方法可以处理这个问题 但是您需要将元素包装在另一个浏览器中 body he
  • iOS5 上的 UIImagePickerController 内存泄漏

    我在 iOS5 和 XCode4 2 上开发的应用程序中使用 UIImagePickerController 出现内存泄漏 我不知道为什么会出现这种泄漏 您能给我答案吗 和我的代码 void createImagePicker picker
  • Node.js 主机名/IP 与证书的替代名称不匹配

    我正在编写一些节点代码来进行 Facebook 的服务器端登录 我已经非常接近让它完全发挥作用了 但是我在请求 auth code 时遇到了麻烦 我认为这可能与 Facebook 应用程序设置有关Site URL但我尝试过的都没有成功 我使
  • .NET Web 服务 (asmx) 超时问题

    我正在连接到供应商提供的 Web ASMX 服务并通过线路发送一组数据 当您向项目添加服务引用时 我的第一次尝试遇到了 Visual Studio 默认在 app config 文件中引发的 1 分钟超时 我把它增加到 10 分钟 又是一次
  • Java程序在没有定义main方法的情况下如何运行?

    我正在浏览一些 Java 源代码并注意到main方法未定义 Java如何编译源码却无从下手 The main方法仅在 Java 虚拟机执行代码时使用 没有 a 则无法执行代码main方法 但仍然可以编译 编译代码时 通常在命令行上指定一组文
  • TypeORM 在存储库类型上抛出“类型实例化过深且可能无限。ts(2589)”错误

    更新后至VSCode 2019 年 8 月 版本 1 38 和 Typescript 3 6 https code visualstudio com updates v1 38 typescript 36我得到了很多Type instant
  • 如何将表格与森林图对齐(ggplot2)

    我是 R 新手 创建了一个森林 区间图 并在图旁边包含了一个表格 其中包含我的置信区间和风险比 我的问题是 RR 和 CI 与绘图上的水平网格线不完全对齐 我尝试使用此处所示的拼凑解决方案 但这似乎对我不起作用 grid arrange 更
  • 良好的安全实践和自动身份范围管理是否相互排斥?

    我正在尝试使用自动身份范围管理 http msdn microsoft com en us library ms152543 aspx sectionToggle1 但是 确保我的用户可以在具有标识列的表中插入记录的唯一方法是使它们db o
  • 为 Ruby/Rails 动态更改 iTerm2 选项卡标题

    我使用的是 iTerm2 通常会打开许多 选项卡 不幸的是 所有选项卡都显示相同的标题 ruby 因为它都是 ruby 脚本 但一个是rails服务器 另一个是rails控制台 下一个是 spork 我想将选项卡标题动态设置为 服务器 控制
  • 如何将数据从 SQLITE 数据库获取到 Android 中的数组?

    很确定这是一个简单的问题 但我对所有将从游标返回的数据适应不同视图的示例感到困惑 我只想运行原始查询并将返回的每一项数据放入浮点数组中 以便我稍后可以将它们添加起来 我需要为此使用什么 Thanks 当您查询数据库时 您仍然会有一个游标 但
  • 从字符串中删除空格,但不在开头或结尾

    我试图从 C 中的字符串中删除空格 不是从末尾 也不是从开头 只是字符串中的多个空格 例如 hello everyone this is a test hello 和 every 之间有两个空格 从 this 到 is 有五个空格 最终我想
  • OpenCV findContours 破坏源图像

    我编写了一个在单通道空白图像中绘制圆形 直线和矩形的代码 之后 我只需找出图像中的轮廓 就可以正确获取所有轮廓 但找到轮廓后 我的源图像变得扭曲 为什么会出现这种情况 任何人都可以帮我解决这个问题 我的代码如下所示 using namesp
  • 在 JWT Laravel 中使用授权标头时获取 token_not_provided

    I read 本教程 http blog nedex io create an api server for mobile apps using laravel 5 1 我设法使它完美地工作 唯一的问题是当我从 令牌 token here
  • 如何:默认显示 video_player 插件的播放控件 (flutter-web)

    有什么方法可以默认显示视频播放器的控件吗 如果我在浏览器中右键单击视频 我就可以显示它们 所以我假设必须有一种默认显示的方法 我无法找到默认显示 video player 控件的方法 但使用了这个包 它在 Flutter web 上工作得很
  • 将数组写入文件的最佳方法? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我想避免写入数据库并使用常量 数组作为 lang 文件等 i e lang array hello gt hello world 并能够从后台编
  • 数据库镜像/Postgres流复制

    我不是 DBA 我是基于企业数据库的应用程序的主要开发人员 我目前正在指定一些新机器来升级我们现有的企业数据库 目前 我们在 DR 站点上运行带有数据库的 Postgres 8 4 该数据库通过前员工执行的一些自定义 rsync 工作定期接
  • 在 Vim 中的缩进线上按“Home”

    我有一个坏习惯 就是使用 home 键返回到行首 当我最近开始使用 vim 时 我注意到当我在缩进的行上按 home 键时 它会让我回到该行的开头 在 Notepad 我曾经使用的编辑器 中 它会让我返回到该行代码的开头 就在缩进之后 有没
  • 使用 jqGrid 的 ASP.NET MVC 路由

    我正在尝试创建一个指向 url 的链接 例如首页 详情 1在 jqGrid 列中 文档显示 showlink baseLinkUrl showAction show addParam key 2 注意 addParam 应该包含 例如 格式
  • 如何使事件 DOM 侦听器适应 Google Maps JavaScript API v3.35

    我曾经使用以下代码来捕获用户的 Enter 键事件 如果用户没有选择其中任何一个 即没有标记为 pac 的 pac item 则自动从自动完成结果 pac items 中选择第一个结果 项目选择 var input document get