Mousemove и кросс-браузер 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;
    },

Но это работает только в хром и IE7-8. Отладчик IE9 всегда говорит e.button == 0 и e.which == 1. После некоторой отладки я понял, что window.event для IE9 содержит правильное значение, поэтому я поменялся

e = window.event || e;

Это также делает трюк для Safari и Air, но Firefox имеет window.event undefined, а Opera имеет те же самые неправильные значения как в аргументе обратного вызова, так и в объектах window.event.

Ответ 1

Я рассматривал этот вопрос при исследовании связанной проблемы. Оказалось, что моя проблема в том, что мне нужно было использовать отдельные функции для обработки событий onclick и onmouseover.

Я обнаружил, что при использовании Opera, Safari и FireFox свойство "which" объекта события mousemove устанавливается равным 1, когда не была нажата кнопка мыши.

Ответ 2

Хотя этот ответ может быть довольно поздним, я уверен, что это поможет тем, кто в будущем. Я наткнулся на этот вопрос, ища эту функцию перекрестного браузера и изначально проигнорировал ее. Я вернусь, чтобы дать свой ответ тем, которые следуют по моим стопам.

Во-первых, некоторые знания. Я нашел этот сайт очень полезным, так как все проблемы с перекрестным браузером (и большинство из них) разработаны и рассчитаны на ваше развлечение (я смеюсь, когда разработчикам необходимо создавать диаграммы и диаграммы для работы браузеров.)

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

На этой странице, расположенной внизу, вы найдете синюю ссылку, в которой говорится: "Нажмите здесь, используя различные кнопки мыши, чтобы проверить", над этим вы увидите фрагмент кода. Это входит в ваш mousedown или mouseup. Если вы щелкните правой кнопкой мыши и просмотрите источник в этом месте, вы найдете тег script, который содержит 2 функции, одну выше этой ссылки и функцию 'dont', которая предотвращает выполнение событиями по умолчанию или проваливается, хотя и не требуется во всех случаях, полезно знать.

Вторая часть знаний поступает с другого веб-сайта и дает нам некоторое представление о том, как захватывать события мыши и мыши.

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 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 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. Если у вас есть переменная для каждой из этих "кнопок", вы можете увидеть, какая кнопка нажата, а какая нет, и очистить переменные, которые нажимаются на мышку.