mousemove和跨浏览器e.which

时间:2012-05-12 10:35:16

标签: javascript events cross-browser mousemove

我需要知道每次mousemove事件都按下了哪个鼠标键,我尝试使用它:


    getMouseCode: function(e) {
        e = e || window.event;
        if (!e.which && e.button) {
            if      (e.button & 1) e.which = 1;
            else if (e.button & 4) e.which = 2;
            else if (e.button & 2) e.which = 3;
        };
        return e.which;
    },

但这仅适用于chrome和IE7-8。 IE9调试器总是说e.button == 0和e.which == 1.经过一些调试我发现IE9的window.event包含正确的值,所以我换了


e = window.event || e;

这也适用于Safari& Air,但Firefox有window.event未定义,并且Opera在回调参数和window.event对象中都有相同的错误值。

2 个答案:

答案 0 :(得分:0)

我在调查相关问题时正在研究这个问题。事实证明,我的问题是我需要使用单独的函数来处理onclickonmouseover事件。

我发现在使用Opera,Safari和FireFox时,当没有点击鼠标按钮时,mousemove事件对象的“which”属性设置为1。

答案 1 :(得分:0)

虽然这个答案可能有点迟,但我相信它会对将来有所帮助。我在搜索这个跨浏览器功能时偶然发现了这个问题,最初忽略了它。我回来为那些跟随我的脚步的人提供我的答案。

首先,一些知识。我发现这个网站非常有用,因为所有的跨浏览器问题(最好的)都已制定出来,并为您的娱乐而设计(当我们的开发人员需要为浏览器的工作方式创建图表和图表时,我笑了。)

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事件中都知道这一点,你可以简单地存储结果按钮'name'和事件类型(向下或向上),然后在mousemove事件期间调用变量信息。如果每个“按钮”都有一个变量,则可以看到按下了哪个按钮,哪个按钮没有,并清除鼠标上按下的变量。