javascript - 用 javascript 覆盖浏览器 CTRL+(WHEEL)SCROLL

Question

在大多数 Linux 浏览器中，CTRL+(WHEEL)SCROLL 允许用户通过放大或缩小所有元素的大小来放大和缩小页面。现在我想覆盖此行为并通过应用仿射变换让 CTRL+WHEEL 放大我拥有的 SVG 元素。

这可能吗？具体来说，是否可以捕获此键盘/鼠标事件并抑制浏览器的默认行为？

Answer 1

像这样一道题，难点很多。基本上，有两个步骤:

1. 监听 keydown 和 keyup 事件，并跟踪 Ctrl 何时按下
2. 听鼠标滚轮，(如果 Ctrl 按下)做你想做的事

但这里是您必须解决的问题:

• 您打算如何应用事件监听器/处理程序？
• According to QuirksMode , Mac 上的浏览​​器不会为 Ctrl 返回准确的键码。
• Also according to QuirksMode , Firefox 不支持 mousewheel 事件。您必须改用 DOMMouseScroll。
• According to the MDC ，在某些情况下，DOMMouseScroll 事件在与 Ctrl 一起使用时甚至不会被触发!

我并不是说它们是无法克服的，甚至不是说它们是大问题。使用一个好的 JavaScript 库应该抽象掉其中的大部分，如果不是全部的话。如果可行的话，有选择性地选择要支持的浏览器/操作系统也会有很大帮助。

如果我用 jQuery(和 a jQuery mousewheel plugin)来做这个，它看起来像这样:

(function ($) {
    var isCtrl = false;

    function ctrlCheck(e) {
        if (e.which === 17) {
            isCtrl = e.type === 'keydown' ? true : false;
        }
    }

    function wheelCheck(e, delta) {
        // `delta` will be the distance that the page would have scrolled;
        // might be useful for increasing the SVG size, might not
        if (isCtrl) {
            e.preventDefault();
            yourResizeMethod(delta);
        }
    }

    $(document).
        keydown(ctrlCheck).
        keyup(ctrlCheck).
        mousewheel(wheelCheck);
}(jQuery));