Attaching Right Click Event on Dynamically Created Elements

Question

Below is the code that dynamically creates an element and attach an onclick event.

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

How about attaching a right click event?

check out http://www.w3schools.com/jsref/event_oncontextmenu.asp — Hu Qiang, Dec 12 '16 at 07:09
Possible duplicate of [Is right click a Javascript event?](http://stackoverflow.com/questions/2405771/is-right-click-a-javascript-event) — Surya Purohit, Dec 12 '16 at 07:18

score 2 · Answer 1 · answered Dec 12 '16 at 07:14

The answer to your question consists of two parts:

1) How to attach the right-click event?

Answer: use the contextmenu event.

2) How to attach an event to dynamically created elements?

Answer: the idea is to attach the event to the parent element that will contain your newly created element. The event will propagate along the DOM until it reaches your parent element.

Working Example:

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

guest271314 · Answer 2 · 2016-12-12T07:14:46.097

0

You can use contextmenu event

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

edited Dec 12 '16 at 07:14

answered Dec 12 '16 at 07:08

guest271314

1
15
104
177

score 0 · Answer 3 · answered Dec 12 '16 at 07:13

0

Add

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

instead onclick

answered Dec 12 '16 at 07:13

w.Bala

129
3

score 0 · Answer 4 · answered Dec 12 '16 at 07:22

0

Working Example

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

}, false);

Codepen : http://codepen.io/mastersmind/pen/WogoVB

answered Dec 12 '16 at 07:22

mastermind

1,057
1
8
15

score -1 · Accepted Answer · answered Dec 12 '16 at 07:15

-1

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

answered Dec 12 '16 at 07:15

Surya Purohit

1,090
1
9
29

Attaching Right Click Event on Dynamically Created Elements

5 Answers5