mousemove和跨浏览器的e.which [英] mousemove and cross-browser e.which

问题描述

我需要知道在每个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.经过一些调试，我发现window.event为IE9包含正确的价值，所以我换了

 
 
e = window.event || e; 
 
 

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

解决方案

p>虽然这个答案可能晚了，但我相信它会帮助未来的人。我在寻找这个跨浏览器功能并且最初忽略它时，偶然发现了这个问题。我回来为我的脚步中的那些人提供我的答案。

首先，一些知识。我发现这个网站非常有帮助，因为所有的跨浏览器问题（大多数）已经制定出来，并为您的娱乐（我笑，当我们的开发人员需要创建图表和图表如何浏览器工作。）

http://unixpapa.com/js/mouse.html

在此页面底部附近有一个蓝色链接，其中显示点击这里用各种鼠标按钮进行测试一个代码片段。这进入你的mousedown或mouseup。如果您右键单击并在此位置查看源代码，您会发现一个脚本标记，其中包含两个函数，一个位于此链接上方的函数，以及一个dont函数，用于防止事件执行默认值或通过，但不会

第二部分知识来自另一个网站，并为我们提供了一些有关如何捕获鼠标滚轮的知识，

http：// www .javascriptkit.com / javatutors / onmousewheel.shtml

为了将这一切放在一起，我们基本上有以下内容..

  function GetMouseButton（e）{
 //规范化事件变量
 var e = window.event || e; 
 //设置按钮初始无法识别（如果需要，则为false）
 var button ='Not Recognized'; 
 
 //检查这是否为按钮推送事件
 if（e.type =='mousedown'|| e.type =='mouseup'）{
 if e.which == null）{
 //检查IE是否是IE，如果是，按下了什么e.button 
 button =（e.button< 2）？ left：
（（e.button == 4）？Middle：Right）; 
} else {
 //所有其​​他浏览器，按下的e.wh 
 button =（e.which< 2）？ left：
（（e.which == 2）？Middle：Right）; 
} 
} else {
 //如果这不是一个按钮push事件，那么我们得到方向
 var direction = e.detail？ e.detail *（-120）：e.wheelDelta; 
 //将方向命名为'button'
开关（方向）{
 case 120：//浏览器使用这些
的不同变体240：
 case 360​​：
 button =中间向上滚动; 
 break; 
 case -120：
 case -240：
 case -360：
 button =Middle Scroll Down; 
 break; 
} 
} 
 
 alert（button）; 
} 
 
 / *简单绑定函数（例如jQuery的）* / 
 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; 
} 
} 
 
 / *将mousedown / mouseup绑定到窗口以及鼠标滚轮* / 
 Bind（window，'mousedown'，GetMouseButton） ; 
 Bind（window，'mouseup'，GetMouseButton）; 
 
 / * FireFox的一个浏览器版本不能识别鼠标滚轮，
 *我们在这一行中考虑
 * / 
 var MouseWheelEvent = 
 （/Firefox/i.test(navigator.userAgent））？ DOMMouseScroll：mousewheel; 
 
 Bind（window，MouseWheelEvent，GetMouseButton）; 
  
 
 
 
 为了节省你一些时间[和知识，如果你不在乎查看这些链接]，您可以查看以下jsfiddle的工作示例：  
 
 
 
  http://jsfiddle.net/BNefn/  
 
 
 
 编辑 
我应该也说，因为你需要知道这一点在每一个mousemove事件，你可以只是存储结果按钮'名称'和事件类型（向下或向上），然后回忆变量信息在你的mousemove事件。如果你有一个变量为每个这些按钮，你可以看到哪个按钮被按下，哪些不是，并清除在鼠标按下的变量。
 
I need to know which mouse key is pressed on every mousemove event, and I try to use this:

    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;
    },

But this is works only in chrome and IE7-8. IE9 debugger always says e.button == 0 and e.which == 1. After some debugging I figured out that window.event for IE9 contains right value of which, so I swapped 

e = window.event || e;

This also does the trick for Safari & Air, but Firefox has window.event undefined, and Opera has the same wrong values in both callback argument and window.event objects.
解决方案
Though this answer may be kind of late, I am sure it will help those in the future. I stumbled upon this question while searching for this cross browser feature and originally disregarded it. I am back to provide my answer for those that follow in my footsteps.

First, some knowledge. I found this site very helpful, as all the cross browser issues (well most) are worked out, and laid out for your amusement (I laugh when us developers need to create charts and diagrams to how browsers work..)

http://unixpapa.com/js/mouse.html

On this page, near the bottom, you will find a blue link that says "Click here with various mouse buttons to test", above this you will see a code snippet. This goes into your mousedown or mouseup. If you right click and view the source at this location, you will find a script tag that holds 2 functions, the one above this link, and a 'dont' function that prevents the events from doing their default, or falling through, though not needed in all cases, is useful to know about.

The second piece of knowledge comes from another website, and provides us some insight into how to capture the mouse wheel up and down events.

http://www.javascriptkit.com/javatutors/onmousewheel.shtml

To put this all together in 1 place, we basically have the following..
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);
To save you some time [and knowledge, if you don't care to look at these links], you can view a working example at the following jsfiddle:

http://jsfiddle.net/BNefn/

EDIT
I should have also said, that since you need to know this on every mousemove event, you can simply store the resulting button 'name' and event type (down or up), and then recall that variables information during your mousemove event. If you have a variable for each of these "buttons" you can then see which button is pressed and which isn't, and clear the variables that are pressed on mouseup.

                        
这篇关于mousemove和跨浏览器的e.which的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！