使用Javascript在x轴（左侧和右侧）上检测鼠标滚轮

我知道有可能检测到上下偏移，使用Javascript在x轴（左侧和右侧）上检测鼠标滚轮

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;

但是有没有一种方法来检测用户的鼠标是用鼠标左键还是右键？

来源

2012-05-30 bob_cobb

你想知道'鼠标'或'鼠标滚轮'是向左还是向右？并非所有鼠标滚轮都左右移动。 – aglassman

@aglassman好问题。只是鼠标滚轮。 –

@bob_cobb，你可能想重新审视你的批准答案，以[最投人最丰富的细节之一]（http://stackoverflow.com/a/12850780/1712065）。这有助于未来的访问者找到正确的信息，并向你展示你甚至关心社区！ – Annie

Firefox中的DOMMouseWheel事件具有axis属性。
Chrome中的mousewheel事件有wheelDeltaX和wheelDeltaY。
不幸的是，我找不到IE事件的任何等价物（在IE9上测试）。

来源

2012-05-30 18:38:44 apsillers

谢谢。我会看看我是否找不到适合IE的东西。 –

我相信你可以从

event.originalEvent.wheelDeltaX

找到“水平”或x轴数据应该调试代码，看看有什么性质的事件对象具有在运行时。这应该证实或否认该财产是否存在。从那里，它只是一个检测值是否不同的问题。

来源

2012-05-30 18:34:14 aglassman

看看这个答案。 http://stackoverflow.com/questions/8212851/detect-the-horizontal-mousewheel – aglassman

查看接受的答案以获取更多链接和信息。

Bubbling scroll/mousewheel event

event.detail指定 “滴答” 鼠标滚轮移动的数目。

正值表示下/右”，负向上/左。

event.axis指定滚动手势的轴线（水平或垂直）。在Firefox 3.5

加入该属性Chrome浏览器实现了相同的行为，据我所知IE在IE和Chrome：使用e.wheelDeltaX和e.wheelDeltaY

来源

2012-05-30 18:38:34 Knyri

的Internet Explorer：使用addEventListener在IE9和IE10你必须使用onwheel事件（不是onmousewheel，也不DOMMouseScroll），以便能够从DOM检测水平滚轮滚动。使用event.deltaX值和event.deltaMode值来检测水平鼠标滚轮（对于垂直滚轮使用event.deltaY值）。对于< = IE8使用onmousewheel事件和event.wheelDelta（仅适用于旧IE版本的yaxis鼠标轮）。

Blink/Webkit：支持自Chrome 31/Safari 7以来的onwheel事件。否则使用onmousewheel事件和event.wheelDeltaX和event.wheelDeltaY属性。 Chrome/Safari的唯一诀窍：在鼠标滚动向左/向右滚动时使用SHIFT键（用于测试）。

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

Try the onwheel event out yourself使用来自QuirksMode的车轮事件测试器。我可以看到这个工作在Win7上使用IE9，在Windows 8上使用IE10（发布预览版，IE版本10.0.8400.0）。设置新的标准轮循事件：

选择addEventListener（capture）radio。
不可滚动滚动。
解开鼠标滚轮。
让车轮打勾。
勾选右列底部的显示事件属性。
使用F12并确认文档处于documentMode IE9标准或IE10标准。
做一些鼠标在中心列上滚动，看到轮盘事件记录在左栏，轮子事件详细信息显示在右栏底部。
有时你可能需要取消选中并retick轮事件复选框以获取事件（不知道为什么：也许错误在怪异模式页面或IE？）

的W3C specification，该Microsoft IE9 documentation for the MouseWheel event和MDN docs指定onwheel事件：

deltaX - 获取鼠标滚轮已经绕x轴（水平）而旋转的距离。
deltaY - 获取鼠标滚轮围绕y轴旋转的距离（垂直）。
deltaZ - 获取鼠标滚轮围绕z轴旋转的距离。
deltaMode - 获取一个值，指示测量单位为增量值：
- DOM_DELTA_PIXEL（0×00）默认值。增量以像素为单位进行衡量。
- DOM_DELTA_LINE（0x01）增量以文本行进行度量。
- DOM_DELTA_PAGE（0x02）增量以文本页面为单位进行测量。

编辑：确保你不preventDefault（）方法的情况下，如果event.ctrlKey设置，否则你可能会阻止页面缩放。显然，如果你在Chrome和IE的触摸板上使用捏缩放，ctrlKey设置为true。

特征检测很难在IE：

在IE10与IE8 documentMode，'onwheel' in document返回true，但似乎没有事件进行水平或垂直onwheel触发的事件。
在IE9中'onwheel' in document返回false但onwheel事件起作用（我猜应该在使用IE9中的onwheel事件之前检查document.documentMode === 9）。
在IE9和IE10中，传统的document.onwheel = 'somefunc(event)'在documentMode 9或10中似乎不起作用（即看起来像只能使用addEventListener）。

要进行测试，请使用微软的tiltwheel鼠标，滚动触摸板（手势或区域）或Apple设备（魔术鼠标或强大的鼠标滚动球）。在Windows中使用各种鼠标或触控板设置进行播放（或者如果使用Safari在OSX上测试水平滚动，请在OSX上使用鼠标偏好设置）。

delta值的符号对于所有浏览器的onwheel和onmousewheel都有相反的符号。在IE中δ值，例如（使用我的dev机IE9具有非常标准的Microsoft鼠标）是用于onwheel onMouseUp和onMouseWheel不同：

event.deltaY是Win7上111上的Win8或72 onwheel事件向下滚动一个缺口。该值随着缩放而略有变化，但还有一些其他因素也涉及到我无法解决的问题（似乎不是字体大小）。
event.wheelDelta为-120为onmousewheel事件向下滚动一个缺口。
对于Windows XP“我们必须添加对WM_MOUSEHWHEEL消息支持，使这项工作[，支持]在Vista中添加，所以如果你使用的是XP，你需要的IntelliType Pro和/或的IntelliPoint安装” - 按this article 。
各种常见的触摸板和鼠标驱动程序破坏了浏览器的鼠标滚轮支持。打破浏览器检测，或使用WM_HSCROLL和WM_VSCROLL消息而不是WM_MOUSEWHEEL和WM_MOUSEHWHEEL消息。因此，驱动程序不会在浏览器中生成轮子事件（无论您使用的是哪种浏览器，或者使用了哪个版本的Windows）。 A search of Bugzilla for WM_VSCROLL显示可能影响任何浏览器（不仅仅是Firefox）的问题。

来源

2012-10-12 00:54:23 robocat

这个答案是迄今为止我发现的最好的资源。感谢这项惊人的研究工作。 +1 – kikito

IE支持所有这些：mousewheel | onmousewheel它们是event handlers以及WheelEvent（提供DeltaX，DeltaY，DeltaZ），这是standard Event和MouseWheelEvent interface，这是在IE9 + also supported（具有WheelDelta和其他一些x， y坐标相关属性）。

测试IE11。

相关：今天当触摸事件标准最终得到正式化后，结果IE11已经支持其中大部分：http://blogs.msdn.com/b/ie/archive/2015/02/24/pointer-events-w3c-recommendation-interoperable-touch-and-removing-the-dreaded-300ms-tap-delay.aspx。

除此之外：@bob_cobb，您可能需要重新审核您赞成的most voted with most richer details one。这有助于未来的访问者找到正确的信息，并向你展示你甚至关心社区！

来源

2015-02-25 04:02:01 Annie

使用Javascript在x轴（左侧和右侧）上检测鼠标滚轮

回答

相关问题