1

I have a few event listener and it works in all browsers except mousewheel in Firefox (in Chrome and other it works perfect). It should zoom in and zoom out when I scrolling. It's JSC3D library. Code is below

// setup input handlers.
// compatibility for touch devices is taken into account
var self = this;
if(!JSC3D.PlatformInfo.isTouchDevice) {
    this.canvas.addEventListener('mousedown', function(e){self.mouseDownHandler(e);}, false);
    this.canvas.addEventListener('mouseup', function(e){self.mouseUpHandler(e);}, false);
    this.canvas.addEventListener('mousemove', function(e){self.mouseMoveHandler(e);}, false);
    //this.canvas.addEventListener('mousewheel', function(e){self.mouseWheelHandler(e);}, false);
    this.canvas.addEventListener(JSC3D.PlatformInfo.browser == 'firefox' ? 'DOMMouseScroll' : 'mousewheel', 
                                 function(e){self.mouseWheelHandler(e);}, false);
    document.addEventListener('keydown', function(e){self.keyDownHandler(e);}, false);
    document.addEventListener('keyup', function(e){self.keyUpHandler(e);}, false);
}
else if(JSC3D.Hammer) {
    JSC3D.Hammer(this.canvas).on('touch release hold drag pinch', function(e){self.gestureHandler(e);});
}
else {
    this.canvas.addEventListener('touchstart', function(e){self.touchStartHandler(e);}, false);
    this.canvas.addEventListener('touchend', function(e){self.touchEndHandler(e);}, false);
    this.canvas.addEventListener('touchmove', function(e){self.touchMoveHandler(e);}, false);
}

And function JSC3D.Viewer.prototype.mouseWheelHandler:

JSC3D.Viewer.prototype.mouseWheelHandler = function(e) {
if(!this.isLoaded)
    return;

if(this.onmousewheel) {
    var info = this.pick(e.clientX, e.clientY);
    this.onmousewheel(info.canvasX, info.canvasY, e.button, info.depth, info.mesh);
}

e.preventDefault();
e.stopPropagation();

if(!this.isDefaultInputHandlerEnabled)
    return;

this.zoomFactor *= (JSC3D.PlatformInfo.browser == 'firefox' ? -e.detail : e.wheelDelta) < 0 ? 1.1 : 0.91;
this.update();
};

Anyone?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Megadevice
  • 23
  • 1
  • 8
  • see wheel event - https://developer.mozilla.org/en-US/docs/Web/Events/wheel - DOMMouseScroll is **old** firefox - the linked page has cross browser code example – Jaromanda X Oct 21 '15 at 07:54
  • I tired replace DOMMouseScroll with wheel and still doesn't work – Megadevice Oct 21 '15 at 08:10
  • you say `doesn't work` which is meaningless ... is the event fired? do you at least get to your `mouseWheelHandler` function? – Jaromanda X Oct 21 '15 at 08:13

2 Answers2

1

if (this.addEventListener) {
 // IE9, Chrome, Safari, Opera
 this.addEventListener("mousewheel", MouseWheelHandler, false);
 // Firefox
 this.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
}
// IE 6/7/8
else this.attachEvent("onmousewheel", MouseWheelHandler);

Firefox uses the DOMMouseScroll event rather than mousewheel

PC3TJ
  • 852
  • 5
  • 16
1

The most respect for jsc3d, but rather than sniffing browser agent, i would better go with feature detection for this, something like:

if(!JSC3D.PlatformInfo.isTouchDevice) {
...
this.canvas.addEventListener('onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll', function(e){self.mouseWheelHandler(e);});
...
}

EDIT: ...and with the same logic, also remove the check for 'firefox' in :

JSC3D.Viewer.prototype.mouseWheelHandler = function(e) {
...
    this.zoomFactor *= (e.deltaY ? e.deltaY : e.wheelDelta ? e.wheelDelta : e.detail) < 0 ? 1.1 : 0.91;
...
};

then, you should get your handler: 

function OnViewerMouseWheeel(canvasX, canvasY, button, depth, mesh) {
    ...
}
viewer.onmousewheel=OnViewerMouseWheeel;

Tested in latest FF, 'onwheel' in document is returning true.

Please, let me know if this solves the issue.

deblocker
  • 7,629
  • 2
  • 24
  • 59