如何使 Event DOM Listener 适应 Google Maps JavaScript API v3.35

Question

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

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 开始，我会在 google.maps.event.trigger(this,'keydown',{keyCode:40}) 的行中收到类似 Uncaught TypeError: a.stopPropagation is not a function 的错误。

结果，我查看了文档，发现 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) 捕获 ArrowDown 键，但实际上什么也没发生。另外，当我按下键盘上的 ArrowDown 键时，console.log(e.key) 没有捕捉到任何东西，这让我很困惑。

有没有人遇到过类似的问题？感谢您的任何建议！

Answer 1

使用new Event() 创建适当的事件对象作为第三个参数，并在addDomListener 中使用keydown 而不是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);
    }
  }
});

编辑：

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