mouseWheel: "block page scrolling" is not working in firefox;

hellwood

See the example: http://p5js.org/reference/#/p5/mouseWheel Edit and uncomment "return false" to block page scrolling. This work correctly in Chrome and IE, but this does not work in Firefox: it scroll the entire page. Is it a bug ?

blindfish

From what I can see there's no direct method in browsers to facilitate this, so it's essentially a hack. Hacks have a tendency to break as and when browsers update; since they tend to abuse browser functionality rather than use it as intended...

And blocking expected browser behaviour like this is evil :P

GoToLoop

... there's no direct method in browsers to facilitate this, so it's essentially a hack.

Actually returning false for those on...() event handler callbacks is an official HTML5 spec!

http://www.w3.org/TR/html5/webappapis.html#event-handler-attributes

...
4 Process return value as follows:
...
Otherwise
If return value is a WebIDL boolean false value, then cancel the event.

Thence doing so has the same effect as Event's preventDefault() in HTML5 browsers:
https://developer.Mozilla.org/en-US/docs/Web/API/Event/preventDefault

It's easier to tell beginners to use return true for both onmouseover() & onerror(); and return false for everything else than preventDefault() over the passed event parameter.

For further details on the subject, go to:
http://StackOverflow.com/questions/18971284/event-preventdefault-vs-return-false-no-jquery

And btW, @hellwood already posted the issue @ https://GitHub.com/processing/p5.js/issues/1116

They have been using the deprecated onmousewheel() rather than onwheel().
And it seems like Firefox is the only browser which doesn't support onmousewheel()!
Instead Firefox uses DOMMouseScroll, which isn't compatible w/ return false.

And to make matters worse, IE exposes the WheelEvent only via addEventListener().
There is no onwheel attribute on DOM objects there for them.

However, using return false in place of preventDefault() doesn't work for addEventListener().
Therefore for IE browsers, they should continue using deprecated onmousewheel().
While all of the other browsers should jump in onwheel() exclusively.

blindfish

Actually returning false for those on...() event handler callbacks is an official HTML5 spec!

I don't doubt it; but the events themselves are non-standard:

• DOMMouseScroll
• mousewheel
• MouseScrollEvent

For a thorough implementation of mousewheel event handling see wheel.

GoToLoop

... but the events themselves are non-standard.

But that's just what I said: "While all of the other browsers should jump in onwheel() exclusively."

hellwood

I think now it's solved: https://github.com/processing/p5.js/issues/1116 but I did not test it yet....

hellwood

blindfish wrote "And blocking expected browser behaviour like this is evil"

I agree. But I block only when the mouse is over the canvas, so everywhere else on the webpage it's the default behavior.

GoToLoop

@hellwood, indeed they've solved it for all browsers but lost for IE! >:) As I had stated above:

Therefore for IE browsers, they should continue using deprecated onmousewheel().
While all of the other browsers should jump in onwheel() exclusively.

Finally they've figured out that onwheel() is the way to go.
But they're still scratching their heads over what to do w/ IE. 8-}

A possible solution would be as simple as checking out whether onwheel() exists.
If not, fallback to onmousewheel(). That'll fix it for IE browsers! *-:)