Question

在linux上的大多数浏览器中， CTRL +（WHEEL）SCROLL允许用户通过放大或缩小所有元素的大小来放大和缩小页面。现在我想覆盖这种行为，并通过应用仿射变换得到 CTRL + WHEEL来放大我拥有的SVG元素。

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

Answer 1

这样的问题有很多困难。基本上，有两个步骤：

收听keydown和keyup事件，并跟踪 Ctrl 何时关闭
听取鼠标滚轮，并且（如果 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));

Answer 2

添加到sdleihssirhc的答案...不是自己跟踪ctrl键，而是可以在wheelCheck方法中调用e.ctrlKey（代替isCtrl）。如果ctrl键关闭，这将返回true。

我还没有确认这适用于其他平台，但在Windows中，它适用于Chrome，资源管理器和FireFox。

Answer 3

https://developer.mozilla.org/en/Code_snippets/Miscellaneous#Detecting_mouse_wheel_events描述了如何在Firefox中为鼠标滚轮事件添加处理程序 - 理论上包括Ctrl +鼠标滚轮事件 - 但是它提到如果用户的首选项是这样的，那么给定的修改器+鼠标滚轮组合会改变文本大小，然后这些事件监听器将不被调用。所以，它似乎不可能（虽然我没有测试自己以确认该页面的准确性）。

当然，其他浏览器的行为可能不同。如果你是O.K.如果它在Firefox中不起作用，您可以尝试通过设置window.onmousewheel来注册您的处理程序。

使用javascript覆盖浏览器CTRL +（WHEEL）SCROLL

3 个答案: