Question

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

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

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

我的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秒的小视频，了解到底发生了什么 - http://youtu.be/I4nAb77lk_Q?hd=1

请帮助

Answer 1

您可以使用＆＃34; cloneNode（true）＆＃34;克隆元素的功能。传递给函数的参数表示克隆元素及其子节点。

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

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

希望得到这个帮助。

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

1 个答案: