在动态创建的元素上附加右键单击事件答案

【问题标题】：Attaching Right Click Event on Dynamically Created Elements在动态创建的元素上附加右键单击事件
【发布时间】：2016-12-12 07:04:59
【问题描述】：

以下是动态创建元素并附加onclick 事件的代码。

var div = document.createElement('div');
div.onclick = function(e){
    console.debug(e);           
}

var parent = document.getElementsByClassName('myid_templates_editor_center_menu');
parent[0].appendChild(div);

附加一个右键事件怎么样？

【问题讨论】：

你没试过oncontextmenu
签出w3schools.com/jsref/event_oncontextmenu.asp
Is right click a Javascript event?的可能重复

标签： javascript events event-handling dom-events mouseevent

【解决方案1】：

您的问题的答案由两部分组成：

1）如何附加右键事件？

答案：使用contextmenu 事件。

2) 如何将事件附加到动态创建的元素上？

答案：想法是将事件附加到将包含您新创建的元素的父元素。该事件将沿着 DOM 传播，直到它到达您的父元素。

工作示例：

//get parent elements
var elements = getElementsByClassName('myid_templates_editor_center_menu'); 

//attach to the first found parent element
elements[0].addEventlistener('contextmenu', function(e) {
    console.log("right clicked!");
 })

【讨论】：

【解决方案2】：

添加

div.oncontextmenu = function(e){
    e.preventDefault();
    console.debug(e);           
}

而不是点击

【讨论】：

【解决方案3】：

你可以使用contextmenu事件

window.onload = function() {
  var div = document.createElement("div");
  div.innerHTML = "right click";
  div.oncontextmenu = function(e) {
    console.debug(e.type, e);
  }

  document.body.appendChild(div);
}

【讨论】：

【解决方案4】：

工作示例

node.addEventListener('contextmenu', function(ev) {
ev.preventDefault();
alert('success! - Right Click');
return false;

}，假）；

代码笔： http://codepen.io/mastersmind/pen/WogoVB

【讨论】：

【解决方案5】：

var div = document.createElement('div');
div.oncontextmenu = function(e){
    console.debug(e);           
}

var parent = document.getElementsByClassName('myid_templates_editor_center_menu');
parent[0].appendChild(div);

【讨论】：