"paste" event listener not working for a P5.Graphic?

Hello :slight_smile:

I would like to add a “paste” event listener to a p5.Graphic, how can I do that ?

I’ve tried like this:

g = createGraphics(100, 100);
g.elt.addEventListener("paste", pasteEvent => console.log("paste"));

But the event is not firing when I try to paste something inside g. I have other event listeners for g, such as drop, mouseover etc, all working, it’s just this paste event that doesn’t work, I don’t understand why. If I remove “g.elt.” or replace with “g.elt.parentElement” then the event works but on the entire window, I would like to be able to paste only inside g.

I also tried to add



g.attribute("type", "input");

Without luck.

My actual workaround is to set a variable “mouseInside” to true in g’s mouseover event , set it to false in g’s mouseout event, and then in the window’s paste event I check if this variable is true, it works…

Is there a better solution ?

How did you get any eventListener to work on your createGraphics()?

I tried … but no luck.

function setup() {
  const cnv = createCanvas(400, 400);
  // cnv.elt.addEventListener('click', e=> { console.log(e) });
  const g = createGraphics(width,height);
  g.elt.addEventListener('click', e=> { console.log(e) });

You need to call show() 1st: p5js.org/reference/#/p5.Element/show


Thanks @GoToLoop

@Yom … this is returning what I pasted.

function setup() {
  createCanvas(400, 400);

  const g = createGraphics(100, 100);
  g.attribute('contenteditable', 'true');
  g.elt.addEventListener('paste', e => {
  g.position(100, 100);
  g.rect(0, 0, 100, 100);