相关疑难解决方法(0)

对于另一个问题,我编写了这个答案,包括这个示例代码.

在该代码中,我使用鼠标滚轮来放大/缩小HTML5 Canvas.我找到了一些代码来规范Chrome和Firefox之间的速度差异.但是,Safari中的缩放处理要比其中任何一个快得多.

这是我目前的代码:

var handleScroll = function(e){
  var delta = e.wheelDelta ? e.wheelDelta/40 : e.detail ? -e.detail/3 : 0;
  if (delta) ...
  return e.preventDefault() && false;
};
canvas.addEventListener('DOMMouseScroll',handleScroll,false); // For Firefox
canvas.addEventListener('mousewheel',handleScroll,false);     // Everyone else

在Chrome v10/11,Firefox v4,Safari v5,Opera v11和IE9上滚动相同数量的鼠标滚轮时,我可以使用哪些代码来获得相同的"delta"值？

这个问题是相关的,但没有好的答案.

编辑:进一步调查显示一个滚动事件'up'是:

                  | evt.wheelDelta | evt.detail
------------------+----------------+------------
  Safari v5/Win7  |       120      |      0
  Safari v5/OS X  |       120      |      0
  Safari v7/OS X  |        12      |      0
 Chrome v11/Win7  |       120 …

我想对三种情况进行区分:

e.preventDefault();
if(Mousewheel.direction = Left)
    base.goForward();
else if(Mousewheel.direction = Right)
    base.goBack();
else{   
    //Doing normal slide                            

但我找不到任何指示鼠标滚轮是水平还是垂直的东西,插件鼠标滚轮的唯一返回,即delta和event.

如果有人知道如何在水平和垂直方向上进行区分,感谢您分享您的提示.

我已经设置了我的应用程序/网站,以便在滚动面板顶部有一个绝对定位的画布元素,当滚动面板滚动时,我将偏移应用到画布上,使其看起来像图像滚动(这允许我有巨大的帆布没有巨大的帆布元素的开销).问题是,当我的鼠标位于画布元素上时,滚轮不起作用,因为滚动事件不会冒泡.但是,在这种情况下,我需要冒泡才能使滚动条工作.

我正在使用GWT,所以我宁愿不依赖于jQuery解决方案(虽然纯粹的javascript解决方案也可以),因为将两者混合起来有点困难.我可以捕捉鼠标滚轮事件,但主要问题是它似乎没有区分滚动(向上/向下)和车轮倾斜(左/右).我尝试了eventGetShiftKey(),eventGetButton(),eventGetType()和其他一些但是所有这些方法都返回了相同的滚动和倾斜结果(向左倾斜=向上滚动,向右倾斜=向下滚动).

似乎处理这个问题的最好方法是将实际事件冒泡到scrollpanel(顺便提一下,它还包含包含绝对定位画布的父div),但我不确定这是否可能？