虽然这个答案可能有点晚了,但我相信它会对未来的人有所帮助。我在搜索这个跨浏览器功能时偶然发现了这个问题,最初忽略了它。我回来为那些追随我的人提供答案。
首先,一些知识。我发现这个网站很有帮助,因为所有跨浏览器问题(大多数)都已解决,并为您提供娱乐(当我们开发人员需要创建图表来了解浏览器的工作方式时,我会笑..)
http://unixpapa.com/js/mouse.html
在此页面的底部附近,您会找到一个蓝色链接,上面写着“使用各种鼠标按钮单击此处进行测试”,在此上方您将看到一个代码片段。这将进入您的 mousedown 或 mouseup。如果您右键单击并查看此位置的源代码,您会发现一个包含 2 个函数的脚本标签,即此链接上方的一个函数,以及一个“不”函数,该函数可防止事件执行默认或失败,尽管不是在所有情况下都需要,了解一下很有用。
第二条知识来自另一个网站,它为我们提供了一些关于如何捕获鼠标滚轮向上和向下事件的见解。
http://www.javascriptkit.com/javatutors/onmousewheel.shtml
把这一切放在一个地方,我们基本上有以下..
function GetMouseButton(e) {
// Normalize event variable
var e = window.event || e;
// Set button to initially not recognized (or false if you need to to be)
var button = 'Not Recognized';
// Check if this is a button push event
if(e.type == 'mousedown' || e.type == 'mouseup') {
if (e.which == null) {
// Check if IE, if so, what e.button was pressed
button = (e.button < 2) ? "Left" :
((e.button == 4) ? "Middle" : "Right");
} else {
// All other browsers, what e.which was pressed
button = (e.which < 2) ? "Left" :
((e.which == 2) ? "Middle" : "Right");
}
} else {
// If this is not a button push event, then we get the direction
var direction = e.detail ? e.detail * (-120) : e.wheelDelta;
// And name the direction as a 'button'
switch(direction) {
case 120: // Browsers use different variants of these
case 240:
case 360:
button = "Middle Scroll Up";
break;
case -120:
case -240:
case -360:
button = "Middle Scroll Down";
break;
}
}
alert(button);
}
/* Simple Bind function (like jQuery's for example) */
function Bind(elem, type, eventHandle) {
if (elem == null || elem == undefined) return;
if ( elem.addEventListener ) {
elem.addEventListener( type, eventHandle, false );
} else if ( elem.attachEvent ) {
elem.attachEvent( "on" + type, eventHandle );
} else {
elem["on"+type]=eventHandle;
}
}
/* Bind your mousedown / mouseup to the window, as well as the mousewheel */
Bind(window, 'mousedown', GetMouseButton);
Bind(window, 'mouseup', GetMouseButton);
/* One of FireFox's browser versions doesn't recognize mousewheel,
* we account for that in this line
*/
var MouseWheelEvent =
(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel";
Bind(window, MouseWheelEvent, GetMouseButton);
为了节省您一些时间 [和知识,如果您不想查看这些链接],您可以在以下 jsfiddle 中查看一个工作示例:
http://jsfiddle.net/BNefn/
编辑
我还应该说,由于您需要在每个 mousemove 事件上都知道这一点,您可以简单地存储生成的按钮“名称”和事件类型(向下或向上),然后在 mousemove 事件期间调用变量信息。如果这些“按钮”中的每一个都有一个变量,那么您可以查看哪个按钮被按下,哪个按钮没有被按下,并清除在 mouseup 上按下的变量。