2014-01-20 3 views
6

Все вопросы, которые я видел о том, как обнаружить средний щелчок мыши в JavaScript, связаны с jQuery, но мне интересно, как я могу обнаружить средние щелчки мыши с помощью обычного JavaScript. Я попытался использовать onClick(), но он работает только для левой кнопки мыши.Как определить среднюю кнопку мыши?

Есть ли функция JavaScript, которая может обнаруживать как левую, так и среднюю нажатия кнопки мыши или, если нет, то можно обнаружить средние щелчки мыши?

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

+0

Поиск перед столбом оно: http://stackoverflow.com/questions/5833928/jquery-alert-when-middle-mouse-button-clicked ;). Простите, Нейт, я не очень хорошо это прочитал! –

+1

http://www.thonky.com/javascript-and-css-guide/detect-mouse-button/ – sinisake

+1

@ Gaucho_9 Прочитайте вопрос перед выговором ;-) Я пытаюсь выяснить, можно ли отслеживать среднюю мышь нажатие кнопки * без * jQuery. – Nate

ответ

8

onclick не привязан к мыши, но больше относится к самому целевому элементу.

Вот как определить элемент, является ли средний щелкнул:

document.body.onclick = function (e) { 
    if (e && (e.which == 2 || e.button == 4)) { 
    console.log('middleclicked') 
    } 
} 
+1

Я добавил еще один пример, где вы можете передать дополнительные параметры. Обратите внимание, как функция возвращает сама функция, а неявный «e» находится в стеке вызовов закрытой функции. Я обычно не сталкиваюсь с контекстом, чтобы объяснить такой синтаксис. Благодарим за возможность, особенно без использования jQuery! – Schien

+0

@fiatjaf спасибо за редактирование ответа. просто хочу указать, что редактирование привязывает событие onclick к document.body, тогда как мой ответ присоединяется к определенным dom-узлам. редактирование значительно меняет мой ответ. так как ОП уже получил свой ответ, я не возражаю, если вы вернете редактирование на этом этапе. – Schien

+0

Прошу прощения за большое редактирование, но StackOverflow - это не сайт, предназначенный только для ответа на конкретных людей, которые задают вопросы, но большую энциклопедию о том, как делать кодовые вещи. Ваш ответ, я думаю, полезную информацию нелегко найти где-нибудь еще, но это было странно. Мое редактирование было сделано, чтобы сделать его более полезным и более легким для чтения для будущих людей, достигающих этого вопроса. Повторно отредактируйте, если вы считаете, что что-то не так. – fiatjaf

1

Вы должны обнаружить это событие 2

event = event || window.event; //make sure to pass the event into the function 
if (event.which == 2) { 
    //do code.. 
} 
1

ниже код может помочь вам. Он может обнаружить, какую кнопку мыши пользователь нажал. e.which == 2 для средней кнопки.

<script type="text/javascript"> 

function detect_button(e){ 
    e = e || window.event; 

    if (e.which == null){ 
     button = (e.button < 2) ? 'left' : ((e.button == 4) ? 'middle' : 'right'); 
    } 
    else{ 
     button = (e.which < 2) ? 'left' : ((e.which == 2) ? 'middle' : 'right'); 
    } 

    alert(button); 
} 

</script> 
+5

Если вы собираетесь скопировать код, связанный с комментарием, сначала объясните его. –

0

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

document.getElementById("myBtn").onclick = function(event) { 
    event = event || window.event 

    // Now event is the event object in all browsers. 

    // Note: event.target - the reference to clicked element. IE uses event.srcElement 
    // In W3C there is a button property which works same in all browsers except IE: 
    // 0 - left button, 1 - middle button, 2 - right button 
    // For IE, left button = button & 1 (the 1st bit) is set to 1 
    // right button = button & 2 (the 2nd bit) is 1 
    // and middle button = button & 4 (the 3rd bit) 
    var left = event.button == 0 || 1 == event.button&1; 
    var middle = event.button == 1 || 1 == event.button&2; 
    var right = event.button == 2 || 1 == event.button&3; 

    // Put your code here 
} 
+1

'event.button == 1' также триггеры' 1 == event.button & 1'. Так что этот код сломан. – Vadzim

+0

Хорошая добыча! Поэтому вам нужно обернуть это в разделе IE и в разделе, отличном от IE. – disrvptor

Смежные вопросы