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

How to catch mousewheel up/down event using RaphaelJs

本文关键字：事件 RaphaelJs 何使用 鼠标      更新时间：2023-09-26

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

首先，我需要赶上事件：但我发现似乎没有任何效果。只需要浏览器支持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);
});

使用 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);
    });
});
相关文章：