在動態創建的元素上附加右鍵單擊事件

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

您可以使用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 3

添加

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

而是點擊

Answer 4

工作示例

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

}， 錯誤的）;

代碼筆： 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);