Может ли этот код JavaScript повлиять на другие события нажатия клавиш, отключив один ключ?

Question

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

window.onkeydown = function(e) { 
    return !(e.keyCode == 32); 
}; 

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

Спасибо!

Answer 1

ASCII-код 32 - это значение ASCII, которое представляет клавишу пробела, и ваш код по существу указывает браузеру, что он возвращает false при обнаружении этого ключевого кода. Поскольку false возвращается, эффект полосы прокрутки, о котором вы говорите, фактически успешно отключен.

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

Вместо того, чтобы возвращать false, если обнаружен код ключа, передайте текущее значение scrollTop в закрытие, которое возвращает функцию в событие setTimeout. Когда срабатывает setTimeout, позиция scrollTop возвращается обратно к значению, в которое оно было, когда событие setTimeout было впервые зарегистрировано.

window.onkeydown = function(e) { 
    if(event.keyCode == 32) { // alert($(document).scrollTop()); 
     setTimeout(     
      (function(scrollval) { 
       return function() { 
        $(document).scrollTop(scrollval); 
       }; 
      })($(document).scrollTop()), 0); 
    } 
}; 

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

Под капотом прокрутка все еще имеет место. Он просто сбрасывается со скоростью, достаточно быстрой, чтобы пользователь не заметил.

Если вы увеличите это значение до 100 или 1000, это даст вам лучшее представление о том, что происходит под капотом. Фактически вы увидите прокрутку страницы, а затем вернитесь к предыдущей позиции прокрутки.

Это было протестировано только в Chrome и Firefox 13! Таким образом, вам может потребоваться настроить продолжительность setTimeout - в настоящее время 0 - на другое значение в браузерах, таких как Internet Explorer. Будьте готовы к грациозному снижению - поддерживая эту функцию только в современных браузерах - при необходимости.

UPDATE:

Для справки, ниже метод использовать, чтобы сделать это совместимо с основными браузерами. Он был протестирован в Chrome, Firefox, IE8, IE9 и Safari.

Хотя он работает в IE8/IE9, он не очень плавный.

// put the eventhandler in a named function so it can be easily assigned 
    // to other events. 
function noScrollEvent(e) { 
    e = e || window.event; 
    if(e.keyCode == 32) { 
     setTimeout(     
      (function(scrollval) { 
       return function() { 
        $(document).scrollTop(scrollval); 
       }; 
      })($(document).scrollTop()), 0); 
    } 
} 


// Chrome and Firefox must use onkeydown 
window.onkeydown = noScrollEvent; 

// Internet Explorer 8 and 9 and Safari must use onkeypress 
window.document.onkeypress = noScrollEvent; 

Answer 2

Если другой элемент связан с KeyDown случае оно не будет осуществлено этим кодом

Смотрите мою скрипку и попробуйте добавить и удалить текстовое поле прослушивания KeyDown события

window.onkeydown = function(e) { 
    return !(e.keyCode == 32); 
}; 

document.getElementsByTagName("textarea")[0].onkeydown = function(e) { 
    alert("hi"); 
} 

http://jsfiddle.net/HnD4Y/

Answer 3

Ответ выше с SetTimeout не работает для меня вообще на темэ с задержкой 0. С задержкой задеть выше 50мс, он начал работать, но это вызвало заметный скачок страницы.Я считаю, что setTimeout прокручивал страницу слишком рано, а затем Chrome переместил ее позже.

Ниже приводится мое решение, которое хорошо работает. Он возвращает false в событии keydown, чтобы браузер не выполнял ниспадающую страницу. Затем вы убедитесь, что событие, настроенное вами на вашей кнопке и т. Д., Используется вместо этого.

$(mySelector).keyup(eventHandlerFunction); 

[dom element].onkeydown = function(event) { 
    if (event.keyCode == 32) {return false;} 
}; 

Примечания: поля ввода не будут отражать ключевые события клавиша пробела, если они или их родители покрыты этим OnKeyDown обработчика