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

Question

以下是动态创建元素并附加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);

连接右键单击事件？

Answer 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!");
 })

Answer 2

add

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

而不是onclick

Answer 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);
}

Answer 4

工作示例

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

}，false）;

codepen：http://codepen.io/mastersmind/pen/wogovb

Answer 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);