传单中未触发 oncopy 事件
Posted
技术标签:
【中文标题】传单中未触发 oncopy 事件【英文标题】：oncopy event not fired in leaflet 【发布时间】：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>
【参考方案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"' 是什么意思？
【讨论】：
以上是关于传单中未触发 oncopy 事件的主要内容，如果未能解决你的问题，请参考以下文章