使用Javascript在x轴(左和右)上检测鼠标滚轮

Question

我知道可以上下检测,例如

    function handle(delta) {
    if (delta < 0) {
        alert('down');
} else {
    alert('up');
    }
}

function wheel(event){
    var delta = 0;
    if (!event) event = window.event;
    if (event.wheelDelta) {
        delta = event.wheelDelta/120; 
    } else if (event.detail) {
        delta = -event.detail/3;
    }
    if (delta)
        handle(delta);
        if (event.preventDefault)
                event.preventDefault();
        event.returnValue = false;
}

/* Initialization code. */
if (window.addEventListener)
    window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;?

但有没有办法用鼠标滚轮检测用户的鼠标是向左还是向右？

Answer 1

Internet Explorer:在IE9和IE10中,你必须使用onwheel事件(不是onmousewheel,也不是DOMMouseScroll)addEventListener来检测从DOM滚动的水平滚轮.使用该event.deltaX值和event.deltaMode值来检测水平鼠标滚动(对于垂直滚动使用该event.deltaY值).对于<= IE8,请使用onmousewheel事件和event.wheelDelta(仅支持旧版IE的yaxis鼠标滚轮).

Blink/Webkit:自Chrome31/Safari 7开始支持onwheel活动.否则,使用该onmousewheel事件和event.wheelDeltaX与event.wheelDeltaY性能.仅限Chrome/Safari技巧:使用SHIFT键,鼠标滚动向左/向右滚动(对测试很有用).

Firefox:Firefox 17及更高版本支持onwheel事件.要支持旧版本的Firefox(返回3.6),请使用现已弃用DOMMouseScroll的event.axis和event.detail属性来支持水平滚动.(Firefox mobile:文档暗示在使用触摸设备进行平移时会发生onwheel事件.我没有尝试过.)Firefox也有一个MozMousePixelScroll活动.MDN文档还提供了建议的代码来处理跨浏览器的不同事件.Firefox还有一个mousewheel.enable_pixel_scrolling配置,可能会影响所有不同的轮子事件.

使用QuirksMode的车轮事件测试仪自行尝试onwheel事件.我可以看到这在Win7上使用IE9,在Windows 8上使用IE10(发布预览,IE版本10.0.8400.0).要设置新标准的轮盘事件:

• 选择addEventListener(capture)radio.
• Untick滚动.
• Untick鼠标滚轮.
• 留下轮子.
• 在右栏底部勾选显示事件属性.
• 使用F12并确认文档是在documentMode IE9标准或IE10标准中.
• 在中心列上执行一些鼠标滚动,并在左列中查看车轮事件,并在右列底部显示车轮事件详细信息.
• 有时您可能需要取消勾选并重新启动滚轮事件复选框以获取事件(不确定原因:可能是quirksmode页面或IE中的错误？)

在W3C规范中,微软IE9文档中的MouseWheel事件和MDN文档指定onwheel事件:

• deltaX - 获取鼠标滚轮围绕x轴(水平)旋转的距离.
• deltaY - 获取鼠标滚轮围绕y轴(垂直)旋转的距离.
• deltaZ - 获取鼠标滚轮绕z轴旋转的距离.
• deltaMode - 获取一个值,该值指示增量值的度量单位:
  • DOM_DELTA_PIXEL(0x00)默认.增量以像素为单位测量.
  • DOM_DELTA_LINE (0x01)增量是以文本行来衡量的.
  • DOM_DELTA_PAGE (0x02)增量是以文本页面来衡量的.

编辑:确保你没有event.ctrlKey阻止默认()事件如果设置,否则你可能会阻止页面缩放.如果你在Chrome和IE中的触摸板上使用双指缩放,显然ctrlKey也会设置为true.

IE中的特征检测很困难:

• 在IE10中使用IE8 documentMode,'onwheel' in document返回true但似乎没有为水平或垂直onwheel事件触发事件.
• 在IE9中'onwheel' in document返回false但是onwheel事件有效(我想document.documentMode === 9在IE9中使用onwheel事件之前应该检查).
• 在IE9和IE10中,传统document.onwheel = 'somefunc(event)'似乎甚至在documentMode 9或10中都不起作用(即看起来你只能使用addEventListener).

要进行测试,请使用Microsoft倾斜滚轮鼠标,滚动触摸板(手势或区域)或Apple设备(魔术鼠标或强大的鼠标滚动球).在Windows中使用各种鼠标或触摸板设置(或OSX上的鼠标首选项,如果使用Safari测试OSX上的水平滚动).

对于所有浏览器,delta值的符号与onwheel和onmousewheel具有相反的符号.在IE中,例如,对于onwheel和onmousewheel,delta值是不同的(使用带有非常标准的Microsoft鼠标的IE9的dev机器):

• event.deltaY在Win8上是111,在Win7上是72,因为onwheel事件向下滚动一个档次.该值随着缩放而略有变化,但还有一些其他因素,我无法解决(似乎不是字体大小).

• event.wheelDeltaonmousewheel事件向下滚动一个等级是-120 .

• 对于Windows XP"我们必须添加对WM_MOUSEHWHEEL消息的支持以使其工作[,支持]在Vista中添加,因此如果您使用的是XP,则需要安装IntelliType Pro和/或IntelliPoint" - 根据本文.

• 各种常见的触摸板和鼠标驱动程序破坏了浏览器的鼠标滚轮支持,例如浏览器检测失败,或者使用WM_HSCROLL和WM_VSCROLL消息而不是WM_MOUSEWHEEL和WM_MOUSEHWHEEL消息.因此,驱动程序不会在浏览器中生成轮子事件(无论您使用的是哪种浏览器,或者您使用的是哪个版本的Windows).一个用于WM_VSCROLL搜索的Bugzilla显示了可能影响任何浏览器(不只是Firefox)的问题.

Answer 2

• 在DOMMouseWheelFirefox中的事件有一个axis属性.

• mousewheelChrome中的活动有wheelDeltaX和wheelDeltaY.

• 可悲的是,我找不到任何等效的IE事件(在IE9上测试).