1

我目前有这段代码：

canvas.onmousewheel = scroll;

function scroll(event) {
    event.preventDefault();
    var mousex = event.clientX - canvas.offsetLeft;
    var mousey = event.clientY - canvas.offsetTop;
    var wheel = parseInt(event.wheelDelta, 10) / 120; //n or -n

    var zoom = 1 + wheel / 2;

    [... do some action on canvas ...]
};

可悲的是，这在 Firefox 中不起作用。根据MDN：

由于遗留事件类型和非标准，Gecko 没有实施此事件的计划。

如何让我的代码适用于 Chrome 和 Firefox？

编辑：完整代码在这里（一个文件，大约 550 LOC）

4

2 回答 2

3

你可以试试下面的链接

从页面： onmousewheel 事件和 Firefox 的等价物

var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x

if (document.attachEvent) //if IE (and Opera depending on user setting)
    document.attachEvent("on"+mousewheelevt, function(e){alert('Mouse wheel movement detected!')})
else if (document.addEventListener) //WC3 browsers
    document.addEventListener(mousewheelevt, function(e){alert('Mouse wheel movement detected!')}, false)
于 2013-06-26T17:31:04.913 回答
0

我遇到了这个问题，我编写了代码来根据浏览器使用不同的事件。当然 jQuery 或其他框架会很容易做到这一点，但我是一个 Vanilla Javascript 程序员。

对于 chrome：onmousewheel和document.body.scrollTop有效。
对于火狐：onscroll和event.pageY做同样的事情。

if( Browser.chrome){
    window.onmousewheel=function(e){      
      if( document.body.scrollTop > 60){
       /* code to run on scrolled window */
      } else {
      /* code to run when on top */
       }
    };
} else {
   window.onscroll=function(e){
     if(e.pageY > 60){
      /* code to run on scrolled window */
     } else {
      /* code to run when on top */
     }
  };
}

浏览器库位于http://software.sitesbr.net/utils/

于 2017-02-06T16:33:03.480 回答