Canvas.mouseWheel event is undefined

[KevinWorkman]

I'm trying to run this example from the reference: http://p5js.org/reference/#/p5.Element/mouseWheel

This works fine in Chrome and Edge, but not in Firefox or IE.

In Firefox I get ReferenceError: event is not defined. In IE I don't get any errors, but if I print the value of event I see that it is undefined.

I found this closed issue which might be related, and this closed issue that makes me wonder if mouseWheel() was finished for non-chrome browsers?

I should also note that the regular (not using the Canvas) mouseWheel() examples works fine on all browsers: http://p5js.org/reference/#/p5.Element/mouseWheel

Is this expected behavior?

Originally reported on the Processing forum: https://forum.processing.org/two/discussion/comment/75533

[limzykenneth]

Haven't tested it myself but have you tried if the event was triggered when it was attached to other DOM elements instead of the canvas?

[KevinWorkman]

@limzykenneth How would you like me to test it? Here's what I tried:

• I add a <button id="test">testing</button> to the body of the html
• I add select("test").mouseWheel(changeSize); to the setup() function.
• When I load the page, I see the button, but I get an error: Uncaught TypeError: Cannot read property 'mouseWheel' of null

If that is not correct, can you offer an example that you'd like me to test?

Edit: If I do select("button").mouseWheel(changeSize); instead, then the changeZie() function is called when I mousewheel over the button, but I get the same error.

[limzykenneth]

In the example sketch try changing the changeSize function to the following:

function changeSize(event) {
  if (event.deltaY > 0) {
    d = d + 10;
  } else {
    d = d - 10;
  }
}

Let me know if it works on all browsers (particularly Edge since I only have a Mac).

[KevinWorkman]

@limzykenneth That seems to work in all the browsers I have: Chrome, Firefox, IE, and Edge.

[limzykenneth]

OK, I'll file a PR to fix this then. It's just the documentation is documenting old behaviour of the mouse wheel API which have pretty spotty and inconsistent support. In the meantime, just make sure in your callback function you did pass the event argument and also use event.deltaY instead of event.wheelDelta.