带有鼠标轮的addEventListener在Firefox中不工作

Question

我有一些事件侦听器，它可以在所有浏览器中工作，除了Firefox中的鼠标(在Chrome和其他浏览器中，它工作得很完美)。当我滚动的时候，它应该放大和缩小。这是JSC3D库。代码如下

// 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);
}

和函数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();
};

有没有人？

Answer 1

对于jsc3d最尊敬的地方是，与其嗅探浏览器代理，不如对其进行特性检测，比如：

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

编辑:使用相同逻辑的 ...and，还删除“firefox”的检查：

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

那么，您应该得到您的处理程序：

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

在最新的FF中进行了测试，'onwheel' in document正在返回true。

如果这能解决问题请告诉我。

Answer 2

​

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);

​

火狐使用的是DOMMouseScroll事件而不是鼠标轮