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

如何使事件DOM侦听器适应Google Maps JavaScript API v3.35,javascript,google-maps-api-3,Javascript,Google Maps Api 3,我曾经使用以下代码捕获用户的Enter键事件,并在用户未选择任何结果(即,没有标记为已选择pac项)时自动从自动完成结果(pac项)中选择第一个结果 然而,从GoogleMapsJavaScriptAPIv3.35开始,我会得到一个类似于UncaughtTypeError:a.stopPropagation不是在Google.Maps.event.trigger(这个,'keydown',{keyCode:40})行中提出的一个函数 因此,我检查了文档,发现google.maps.event的触

我曾经使用以下代码捕获用户的Enter键事件,并在用户未选择任何结果(即,没有标记为已选择pac项)时自动从自动完成结果(pac项)中选择第一个结果

然而,从GoogleMapsJavaScriptAPIv3.35开始,我会得到一个类似于
UncaughtTypeError:a.stopPropagation不是在
Google.Maps.event.trigger(这个,'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键无法按预期工作

事实上,我可以使用
console.log(e.key)
捕获箭头向下键,但实际上什么都没有发生。另外,
console.log(e.key)
当我按下键盘上的箭头向下键时,没有捕捉到任何东西,这让我很困惑

有没有人遇到过类似的问题?谢谢你的建议

使用
new Event()
创建适当的事件对象作为第三个参数,也可以使用
keydown
而不是
adddomstener中的
keypress

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);
    }
  }
});
编辑:


我这里有一把小提琴

谢谢你的建议。事实上,我试图将
按键
更改为
按键
,但运气不佳。行为完全相同。@CliffordYen我测试的代码捕获了所有密钥。这把小提琴令人印象深刻!为什么使用
keydown
而不是
keypress
会有所不同?不幸的是,虽然它可以捕获箭头向下键,但它仍然无法从谷歌地图自动完成结果中选择第一个结果。我可以选择所有结果,包括第一个结果。你能把你的问题复制到JSFIDLE上让我检查一下吗?对不起,Ergec,我应该说“如果用户在没有选择任何结果的情况下点击Enter键,它仍然不能自动选择第一个结果。”我知道我可以从自动完成结果中选择任何结果。对于JSFIDLE来说,如果不提供GoogleMapsAPI键,我似乎无法使Autocomplete工作。所以我很抱歉,可能很难准确地显示问题。
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);
    }
  }
});