克隆/复制DOM元素function无法正常工作

我的问题与此不同，因为该代码无法单击克隆按钮，我已经解释了该代码如何在video的帮助下工作。 我没有得到任何回应，所以等了3天后，我发布这个问题以获得进一步的帮助。

我有一个非常基本的要求。 当我右键单击一个元素时，它会显示一个上下文菜单，这个菜单有一个clone按钮。 我想要的是当单击此按钮时，它应克隆或复制此选定元素旁边的相同元素。

我面临的问题，当我右键单击>我得到菜单>当我点击克隆时，我的function将不会返回值，如果我再次右击，它将返回值，其次我无法将其附加到所选文本下方，下面是我的代码：

我的editpage.ts代码，使用的函数是clone()

 //for clone clone(){ console.log("clone function here"); document.addEventListener("contextmenu", (e) => { e.preventDefault(); console.log(e, e.srcElement.outerHTML); this.htmlstring = e.srcElement.outerHTML; }); } // code for right click context menu rightPanelStyle: Object = {}; detectRightMouseClick($event) { // disabling the default browser window which comes on right click document.addEventListener('contextmenu', event => event.preventDefault()); if($event.which === 3) { this.rightPanelStyle = {'display':'block','left':$event.clientX + 'px','top':$event.clientY + 'px'}; return false; } } 

下面显示了一个20秒的小video，看看究竟发生了什么 – http://youtu.be/I4nAb77lk_Q?hd=1

请帮忙

Answer 1

您可以使用“ cloneNode（true） ”函数来克隆元素。 传递给函数的参数表示克隆元素及其子节点。

 document.addEventListener('contextmenu', function(e) { var targetElement = e.target; clone = targetElement.cloneNode(true); targetElement.appendChild(clone); }) 

在您的代码中，在clone（）函数中附加“contextmenu”事件。 如果在启动代码时调用它，那就太好了。 如果不是，我建议您在启动代码时执行此操作。 否则，在调用clone函数后将附加contextmenu事件。

希望这有帮助。