# Instance mode events affecting entire html

**URL:** https://discourse.processing.org/t/instance-mode-events-affecting-entire-html/13785
**Category:** Beginners
**Created:** [September 4, 2019, 2:42am UTC](https://discourse.processing.org/t/instance-mode-events-affecting-entire-html/13785 "2019-09-04T02:42:22Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![Brodie](https://avatars.discourse-cdn.com/v4/letter/b/e0b2c6/32.png) [@Brodie](https://discourse.processing.org/u/Brodie)
#### Post date: [September 4, 2019, 2:42am UTC](https://discourse.processing.org/t/instance-mode-events-affecting-entire-html/13785/1 "2019-09-04T02:42:22Z")

</div>

I am having an issue where the events associated with p are being applied to the entire HTML document. If I am clicking on or off the canvas, the event will be fired. Returning false also prevents default for the entire document, where you would expect to only prevent default events on the canvas element itself. Everything is being drawn appropriately.

Using the browser inspector tool I can see that the mousePressed functionality has been applied to the canvas but the entire html document has listeners from P5js. Is there a way to stop this application to the entire html, or at least make P5js only fire events on the canvas.

Below is a simplified implementation:

```auto

var s = function( p ) {
 
    
  p.setup = function() {
  
    p.createCanvas(300, 300);
  };

  p.draw = function() {
  	p.background(0);
    p.rect(20,100,50,50);
  };

  p.mousePressed = function () {
      console.log(p.mouseX);
      // return false; to prevent default
}
 
};

var myp5 = new p5(s, "container");

```

---

<div class="post-metadata">

### Author: ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [September 4, 2019, 2:52am UTC](https://discourse.processing.org/t/instance-mode-events-affecting-entire-html/13785/2 "2019-09-04T02:52:27Z")

</div>

[https://p5js.org/reference/#/p5.Element/mousePressed](https://p5js.org/reference/#/p5.Element/mousePressed)

> **[Bouncing Colorful Balls](https://bl.ocks.org/GoSubRoutine/60b154e52336f7fee7c5f1fe817ceb22)**
>
> GoSubRoutine’s Block 60b154e52336f7fee7c5f1fe817ceb22

> <https://gist.github.com/GoSubRoutine/60b154e52336f7fee7c5f1fe817ceb22>
>
> There are more than three files. show original

---

<div class="post-metadata">

### Author: ![Brodie](https://avatars.discourse-cdn.com/v4/letter/b/e0b2c6/32.png) [@Brodie](https://discourse.processing.org/u/Brodie)
#### Post date: [September 4, 2019, 3:21am UTC](https://discourse.processing.org/t/instance-mode-events-affecting-entire-html/13785/3 "2019-09-04T03:21:39Z")

</div>

For the purpose of clarity: the solution is to implement the P5 instance within an iframe which can then be “included/embedded” in a larger document; hence only affecting the iframe event listeners.

Thank you and apologies for such an obvious answer.

---

<div class="post-metadata">

### Author: ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [September 4, 2019, 11:15am UTC](https://discourse.processing.org/t/instance-mode-events-affecting-entire-html/13785/4 "2019-09-04T11:15:50Z")

</div>

> [@Brodie](#):
>
> The solution is to implement the p5 instance within an `<iframe>`…

Although an `<iframe>` can definitely isolate a sketch and its listeners from the rest, what I actually meant as answer was using the p5.Element::**mousePressed()** in place of p5::**mousePressed()**:

1. [reference | p5.js](https://p5js.org/reference/#/p5.Element/mousePressed)
2. [reference | p5.js](https://p5js.org/reference/#/p5/mousePressed)

While p5::**mousePressed()** listens to the whole browser’s window, p5.Element::**mousePressed()** listens to the element only, regardless the sketch is in global or instance mode.

Here’s another sketch in instance mode whose **mousePressed()** only triggers inside its canvas:  
[https://GoSubRoutine.GitHub.io/Ball-in-the-Chamber/p5js-instance/](https://GoSubRoutine.GitHub.io/Ball-in-the-Chamber/p5js-instance/)  
[https://github.com/GoSubRoutine/Ball-in-the-Chamber/blob/v3.0.0/p5js-instance/sketch/sketch.js#L24-L25](https://github.com/GoSubRoutine/Ball-in-the-Chamber/blob/v3.0.0/p5js-instance/sketch/sketch.js#L24-L25)