如何使Event DOM Listener适应Google Maps JavaScript API v3.35
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使Event DOM Listener适应Google Maps JavaScript API v3.35相关的知识,希望对你有一定的参考价值。
我曾经使用以下代码来捕获用户的Enter键事件,如果用户没有选择其中任何一个,则自动从Autocomplete结果(pac-items)中选择第一个结果(即没有pac-item标记为pac -Item选择的)。
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})
}
}
})
但是,从谷歌地图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键无法按预期工作。
事实上,我可以用console.log(e.key)
捕获ArrowDown键,但没有真正发生。另外,当我按下键盘上的ArrowDown键时,console.log(e.key)
没有抓到任何东西,这让我很困惑。
有没有人遇到类似的问题?谢谢你的任何建议!
使用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);
}
}
});
编辑:
我在这里有一个工作小提琴https://jsfiddle.net/ergec/e6wsdb85/
以上是关于如何使Event DOM Listener适应Google Maps JavaScript API v3.35的主要内容,如果未能解决你的问题,请参考以下文章
Laravel 5.8:如何将两个参数传递给 Event 和 Listener
如何使用 Action Listener 和 Action Event 让 JButtons 在 JTextField 中打印整数?