传单中未触发 oncopy 事件答案

【问题标题】：oncopy event not fired in leaflet传单中未触发 oncopy 事件
【发布时间】：2015-09-10 09:11:52
【问题描述】：

我想捕捉用户按下 Ctrl+C 时触发的复制事件。由于某些原因，当用户与地图交互时它不会被触发。我尝试自动将焦点设置在#map div 上，但没有帮助。

这是一个获取 oncopy 事件 http://jsfiddle.net/669a62dn/ document.getElementById('map').addEventListener('copy', function (e) { console.log(e); }); 的 div 的工作示例

这是一张不起作用的地图：http://jsfiddle.net/b4ueu63f/

感谢任何帮助。谢谢！

【问题讨论】：

当点击地图然后在地图中再次点击时，它似乎可以工作......但检查控制台我的目标是<a class="leaflet-control-zoom-in" href="#" title="Zoom in">+</a>

标签： javascript jquery html css leaflet

【解决方案1】：

您说“当用户与地图交互时，[复制事件] 不会被触发”。但是，它对我有用。如果我选择地图底部的 Leaflet | © OpenStreetMap contributors 文本并按 Ctrl-C，则会触发一个事件。

可能在您进行测试时，您没有选择要复制的任何内容，因此，当您尝试复制时，什么都没有发生，因为没有选择任何内容。

我认为这里的问题可能是地图本身无法选择，因此无法复制，只有地图div中的文字可以。这意味着复制事件处理程序的行为可能与您预期的不同。

【讨论】：

【解决方案2】：

您似乎无法在地图iteslf上触发copy事件。

但你可以像这样欺骗地图：

添加将包含要复制的所需数据的输入。
点击地图：将数据添加到输入并关注它。
然后您可以在此元素上使用copy 事件。

例如：http://jsfiddle.net/j381ybe1/

唯一的变化是copy 事件在input 元素上触发，当您单击地图时，您会在输入中插入一些文本。

【讨论】：

【解决方案3】：

我在这里找到了一个解决方案，但在 js 中翻译咖啡脚本时遇到了一些麻烦，主要是因为我是新手。 How does Trello access the user's clipboard?

var clipboardCont = L.DomUtil.get('clipboard-container');
L.DomUtil.setStyle(clipboardCont, 'display', 'inline');
var textArea = L.DomUtil.get('clipboard');
textArea.focus();
textArea.select();

它最终奏效了。感谢您的回答

【讨论】：

【解决方案4】：

它适用于输入元素。
看，我 fork 了 jsBin

http://jsfiddle.net/tb0ek6q4/

<input id='clipboard' value="HELLO WORLD!">
<div id="log"></div>

脚本

document.getElementById('clipboard').addEventListener('copy', function (e) {
  document.getElementById('log').innerHTML += e;
});

但是'客户端复制 id="map"' 是什么意思？

【讨论】：