传单，复制/呼叫拖动事件

Question

我在项目中使用 Angular 6 和 Leaflet 1.2。

我想重现用户在传单地图上保持右键或左键单击时的拖动效果。 例如，我希望能够在不断按空格键时开始拖动地图。

我已经测试了许多功能，例如在传单地图上调用"鼠标向下"，"鼠标向上"，"单击"，"拖动"，"拖动启动"事件，但没有任何反应;事件正在正确调用，但拖动事件没有发生。

我仍然阻止它，网络似乎没有搜索此功能：o

感谢您的帮助！ 问候

Answer 1

您可以轻松添加事件侦听器来检测何时按住空格键。但是，您需要有某种方法来告诉地图要向哪个方向移动。假设您也希望通过键盘完成此操作，这里有一些示例代码，用于在按住空格键时通过箭头键添加/删除滚动。

function scrollMap(e) {
const key = e.key;
if (key == 'ArrowUp'){
//scroll map 100px up, or whatever you want
}
//repeat for other arrow keys, or inputs of your choice
}
document.addEventListener('keydown', (event) => {
const key = event.code;
if (key == 'Space'){
listen();
}
});
document.addEventListener('keyup', (event) => {
const key = event.code;
if (key == 'Space'){
stopListen();
}
});
function listen(){
document.addEventListener('keypress', scrollMap);      
}
function stopListen(){
document.removeEventListener('keypress', scrollMap);
}

笔记

1( 根据您的页面布局，最好将事件附加到地图元素而不是文档

2(事件代码与事件键等的选择将取决于您的目标浏览器。更多信息请看这里

3(您可能希望使用shift/ctrl/alt代替空格键，因为它们内置在键盘事件上，因此更容易检测和使用跨浏览器。更多信息请看这里