在CTRL + MOUSEWHEEL事件

时间:2015-10-12 14:19:27

标签: javascript jquery javascript-events mouseevent keyboard-events

我被要求为我们的页面网站实现ctrl + mousewheel事件,以便在用户放大或缩小时更改图像偏移。我找到了这个旧的答案Override browsers CTRL+(WHEEL)SCROLL with javascript,我试图这样做。 我为实现下载了jQuery Mouse Wheel Plugin,这是我的代码:

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按钮并转动鼠标,则轮子事件不会触发。 有没有人有更好的解决方案,或者我做错了什么? 谢谢你的帮助

2 个答案:

答案 0 :(得分:8)

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');
         }
    }
});

答案 1 :(得分:1)

要检查是否点击了ctrl key,该事件已经提供了一种方法。试试这个:

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

这也适用于e.shiftKeye.altKey等。我只会听滚动事件,我会检查ctrlKey是否已关闭。