使用javascript覆盖浏览器CTRL +（WHEEL）SCROLL [英] Override browsers CTRL+(WHEEL)SCROLL with javascript

问题描述

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

In most browsers on linux, CTRL+(WHEEL)SCROLL allows the user to zoom in and out of the page by enlarging or shrinking the size of all elements. Now I want to override this behaviour and get CTRL+WHEEL to zoom into an SVG element I have by applying affine transformations.

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

Is this possible? Specifically, is it possible to catch this keyboard/mouse event as well as suppressing the browser's default behaviour?

推荐答案

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

There are a lot of difficulties in a question like this. Basically, there are two steps:

1. 收听 keydown 和 keyup 事件，并跟踪 Ctrl 何时关闭


2. 听取鼠标滚轮，并且（如果 Ctrl 已关闭）做你想做的事情

1. Listen for the keydown and keyup events, and keep track of when Ctrl is down
2. Listen for the mouse wheel, and (if Ctrl is down) do what you want

但是你需要解决以下问题：

But here are the problems you have to address:

• 您将如何应用事件监听器/处理程序？


• 根据QuirksMode ，Mac上的浏览器不会为 Ctrl 返回准确的密钥代码。


• 同样根据QuirksMode ，Firefox不支持鼠标滚轮事件。您将不得不使用 DOMMouseScroll 。


• 根据MDC ，在某些情况下，当 Ctrl 与 Ctrl 一起使用时， DOMMouseScroll 事件，从来没有被解雇过！

• How are you going to apply the event listeners/handlers?
• According to QuirksMode, browsers on Mac don't return an accurate keycode for Ctrl.
• Also according to QuirksMode, Firefox doesn't support the mousewheel event. You'll have to use DOMMouseScroll instead.
• According to the MDC, there are some instances where the DOMMouseScroll event, when used with Ctrl, never even gets fired!

我不是说他们是不可逾越的，甚至他们都是大问题。使用一个好的JavaScript库应该抽象掉它们中的大部分，如果不是全部的话。如果可行的话，选择支持的浏览器/操作系统也会有所帮助。

I'm not saying they're insurmountable, or even that they're big problems. Using a good JavaScript library should abstract away most of them, if not all. Being selective in your choice of browsers/OSs to support will also help quite a bit, if that's doable.

如果我用jQuery（和一个jQuery鼠标滚轮插件），它看起来像这样：

If I were to do this with jQuery (and a jQuery mousewheel plugin), it would look something like this:

(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));

这篇关于使用javascript覆盖浏览器CTRL +（WHEEL）SCROLL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！