在CTRL+鼠标滚轮事件中

Question

我被要求在我们的页面中实现ctrl+鼠标滚轮事件，以便在用户缩放时更改图像偏移量。我找到了这个旧答案Override browsers CTRL+(WHEEL)SCROLL with javascript，并尝试做同样的事情。 我下载了jQuery鼠标滚轮插件进行实现，以下是我的代码：

var isCtrl = false;  
       $(document).on('keydown keyup', function(e) {
            if (e.which === 17) {
                isCtrl = e.type === 'keydown' ? true : false;
            }
        }).on('mousewheel', function(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();
                alert('wheel');
            }
        });

这些事件单独使用时很好，但如果我按住CTRL键并滚动鼠标，滚轮事件就不会触发。 有没有更好的解决方案呢？或者我做错了什么？

- AlexBerd

Answer 1

Fiddle，为了使其正常工作，您需要先在result框中单击才能尝试。

$(window).bind('mousewheel DOMMouseScroll', function(event) 
{
    if(event.ctrlKey == true)
    {
        event.preventDefault();
        if(event.originalEvent.detail > 0) {
             console.log('Down');
         }else {
             console.log('Up');
         }
    }
});

- Thaillie

---

我使用 event.originalEvent.wheelDelta < 0 来检测上下滚动。 - Morten Holmgaard

我的detail一直都是0，所以我更改了你的代码，使用event.originalEvent.deltaY，它将根据方向给出值-100或100。不确定这是否只是我的问题，但如果有人遇到同样的问题，我在此发表评论。 - Thomas Darvik

编辑我的评论: deltaY没有定义，所以我使用了wheelDelta来让它在IE中工作。 - Thomas Darvik

Answer 2

要检查是否点击了ctrl键，事件已经提供了一种方法。请尝试以下操作：

.on('mousewheel', function(e) { 
    if (e.ctrlKey) {
        e.preventDefault();
        alert('wheel');
    }
});

这也适用于 e.shiftKey, e.altKey 等等。我只会监听滚动事件，在那里我会检查 ctrlKey 是否按下。

- divoom12

---

如何在滚轮事件中检查用户是否按住了Ctrl键？您无法从滚轮事件中获取此信息... - AlexBerd

@AlexBerd 在控制台中尝试一下以获得更好的理解：document.body.onwheel = function(e){console.log(e.ctrlKey)} - divoom12

你进行缩放的方式是按住控制键，然后滚动鼠标...现在在Chrome中试试。 - AlexBerd

是的，我看到它在Chrome中可以运行，但我认为你的解决方案不跨浏览器兼容。 - AlexBerd

@YavorIvanov 并非所有浏览器都支持它，有些需要使用 DOMMouseScroll 而不是 mousewheel。 - Thaillie

Answer 3

这可以通过wheel事件实现，这是使用标准滚轮事件接口的方法。

document.getElementById('id_of_element')
         .addEventListener('wheel', (e) => { 
            if(e.ctrlKey) 
              alert("Control + mouse wheel detected!");
    })

- Sanjay