如何使事件DOM侦听器适应Google Maps JavaScript API v3.35 [英] How to adapt Event DOM Listener to Google Maps JavaScript API v3.35

问题描述

我以前使用以下代码捕获用户的Enter键事件，如果用户没有选择其中的任何一个(即，没有pac-item)，则从自动完成"结果(pac-item)中自动选择第一个结果标记为pac-item-selected).

I used to use the following code to catch users' Enter key event and automatically pick the first result from the Autocomplete results (pac-items) if users haven't selected any of them (i.e., there is no pac-item marked as 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的错误.

However, started from Google Maps JavaScript API v3.35, I would get an error like Uncaught TypeError: a.stopPropagation is not a function raised in the line of google.maps.event.trigger(this,'keydown',{keyCode:40}).

结果，我检查了文档，发现google.maps.event的触发方法已更改.现在将第三个参数表示为eventArgs而不是var_args.

As a result, I checked the documentation and noticed that trigger method of google.maps.event has changed. The third argument is now stated as eventArgs instead of var_args.

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

I tried to figure out how to adapt to it and modified the code like:

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键不能按预期工作.

Although the Enter key can be captured perfectly, the ArrowDown key does not work as intended.

实际上，我可以使用console.log(e.key)捕获ArrowDown键，但实际上没有任何反应.另外，当我按下键盘上的ArrowDown键时，console.log(e.key)并没有捕获任何东西，这让我很困惑.

In fact, I can capture the ArrowDown key with console.log(e.key), but nothing really happens. Also, console.log(e.key) does not catch anything when I press the ArrowDown key on my keyboard, which makes me so confused.

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

Does anyone encounter similar problem? Thanks for any suggestion!

推荐答案

使用new Event()创建适当的事件对象作为第三个参数，并在addDomListener

Use new Event() to create proper event object as third parameter and also keydown instead of keypress in your 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);
    }
  }
});

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

I have a working fiddle here https://jsfiddle.net/ergec/e6wsdb85/

这篇关于如何使事件DOM侦听器适应Google Maps JavaScript API v3.35的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！