2016-01-16 10 views
1

Я использую 2 функции, чтобы определить, соответствует ли нажатая клавиша тем, что я хочу, и если да, сделайте что-нибудь. Он работает как шарм в Chrome, но ни одна из функций не работает в Firefox. Есть ли способ заставить меня работать там?Нажатие определенных клавиш для выполнения определенных действий в JavaScript работает в Chrome, но не в Firefox

document.onkeypress = function() { 
 
    if (event.charCode == 49) { 
 
    alert("You pressed 1!"); 
 
    } 
 
    if (event.charCode == 50) { 
 
    alert("You pressed 2!"); 
 
    } 
 
    if (event.charCode == 51) { 
 
    alert("You pressed 3!"); 
 
    } 
 
    if (event.charCode == 52) { 
 
    alert("You pressed 4!"); 
 
    } 
 
} 
 

 
document.onkeydown = function() { 
 
    if (event.keyCode == 122) { 
 
    alert("You pressed F11!"); 
 
    } 
 
}
<span>Press 1, 2, 3, 4 and F11 to launch different events.</span>

ответ

2

Вы забыли объявить event аргумент. Perhaprs Chrome делает это автоматически. Это работает как browsers-

document.onkeypress = function(event) { 
    if (event.charCode == 49) { 
    alert("You pressed 1!"); 
    } 
    if (event.charCode == 50) { 
    alert("You pressed 2!"); 
    } 
    if (event.charCode == 51) { 
    alert("You pressed 3!"); 
    } 
    if (event.charCode == 52) { 
    alert("You pressed 4!"); 
    } 
} 

document.onkeydown = function(event) { 
    if (event.keyCode == 122) { 
    alert("You pressed F11!"); 
    } 
} 
+0

Это намного легче, чем я думал, но я не мог понял это самостоятельно. Большое спасибо. – SoKeT

3

Главный вопрос в этом коде является то, что вы полагаетесь на глобальный event объект, который не указан в спецификации DOM События и была Microsoft-определенную вещь, что Chrome решил поддержать.

О стандартах, совместимых браузеров, можно использовать addEventListener и принять объект события в качестве аргумента:

document.addEventListener("keypress", function(e) { 
    // .... 
}, false); 

Если вам нужна поддержка IE8 и ранее (или IE9 + в их режиме разбитого «совместимости»), вы нужно attachEvent, который ожидает, что вы использовать глобальный event объект:

document.attachEvent("onkeypress", function() { 
    // .... 
}); 

Итак:

function handler(e) { 
    e = e || window.event; 
    // ... 
} 
if (document.addEventListener) { 
    document.addEventListener("keypress", handler, false); 
} else { 
    document.attachEvent("onkeypress", handler); 
} 

Вторая проблема заключается в том, что charCode устарел; according to MDN, вы должны использовать which для числовых значений или (для печатных символов) char для (односимвольной) строки. Вы можете вернуться к charCode или keyCode для старых браузеров.

Я также использовал switch.

Итак:

function handler(e) { 
 
    e = e || window.event; 
 
    switch (e.which || e.charCode || e.keyCode) { 
 
    case 49: 
 
     snippet.log("You pressed 1"); 
 
     break; 
 
    case 50: 
 
     snippet.log("You pressed 2"); 
 
     break; 
 
    case 51: 
 
     snippet.log("You pressed 3"); 
 
     break; 
 
    case 52: 
 
     snippet.log("You pressed 4"); 
 
     break; 
 
    } 
 
} 
 
if (document.addEventListener) { 
 
    document.addEventListener("keypress", handler, false); 
 
} else { 
 
    document.attachEvent("onkeypress", handler); 
 
}
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> 
 
<script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

+0

Это гораздо более подробный ответ, чем я ожидал, и хотя другой ответ решил мою проблему, мне интересно, потому что это кажется более правильным. Я видел кодовые блоки, подобные этому, и люди всегда используют «e», есть ли причина? Я бы предположил, что это «е», как в «событии». Кроме того, что такое «(e.which || e.charCode || e.keyCode)» бит? Я предполагаю, что это заставляет код запускаться, если любой из этих 3 истинен, и он должен убедиться, что он работает в разных браузерах. Что относительно «e = e || window.event;» хоть? Я понятия не имею, что это делает. – SoKeT

+0

@SoKeT: 'e' просто коротко для' event', вы можете использовать любое имя, которое вы хотите (в том числе 'event'). 'e.which || e.charCode || e.keyCode' использует JavaScript [любопытно-мощный '||' operator] (http://blog.niftysnippets.org/2008/02/javascripts-curiously-powerful-or.html), чтобы сделать значение, которое мы включаем первым из тех свойств, которые имеют * правдивое * значение. 'undefined || 49' - '49' в JavaScript, поэтому, если браузер не предоставляет' e.which', но предоставляет один из других, мы будем использовать тот, который он предоставляет. Мы используем ту же функцию для 'e = e || window.event'. –

+0

@SoKeT: Обратите внимание, что если вы запустите код в этом другом ответе на IE8 или ранее (или в IE9 + в «режиме совместимости»), он будет терпеть неудачу, потому что аргумент события не будет передан вашему обработчику. –