javascript - 如何使用 RaphaelJs 捕捉鼠标滚轮向上/向下事件

Question

我需要实现一个水平滚动的时间线。我已经绘制了时间线/网格/标尺等。我只需要向上/向下抓住鼠标滚轮即可滚动时间线（向后 - 过去/向前 - 未来）。

首先我需要捕捉事件：但我发现似乎没有任何效果。仅需要 chrome/firefox（最新版本）的浏览器支持。

这 2 个不会监听器不起作用：

var paper = new Raphael('raphael-paper');
// ...
paper.canvas.on('mousewheel', function(event) {     
    console.log(event);
});
// ...
paper.canvas.addEventListener('mousewheel', function(event) {
    console.log(event);
});

Answer 1

使用jQuery 鼠标滚轮插件 - jquery.mousewheel.js：

用法：

// Init
var paper = new Raphael('raphael-paper');

// When Page Loads
$(document).ready(function()
{
    // capture mouse wheel using bind
    $(paper.canvas).bind('mousewheel', function(event, delta, deltaX, deltaY) {
        console.log(delta, deltaX, deltaY);
    });

    // capture mouse wheel using the event helper
    $(paper.canvas).mousewheel(function(event, delta, deltaX, deltaY) {
        console.log(delta, deltaX, deltaY);
    });
});