Nano Hash - криптовалюты, майнинг, программирование

addEventListener для нажатия клавиш на холсте

Я пытаюсь создать приложение на основе холста, которое реагирует на ввод с клавиатуры и мыши. У меня есть этот код:

canvas = document.getElementById('canvas');
canvas.addEventListener('mousedown', function(event) {
    alert('mousedown');
        }, false);
canvas.addEventListener('keydown', function(event) {
    alert('keydown');
        }, false);

Предупреждение «mousedown» появляется всякий раз, когда я щелкаю мышью, но предупреждение «keydown» никогда не появляется. Тот же код отлично работает в JS Bin: http://jsbin.com/uteha3/66/

Почему не работает на моей странице? Холст не распознает ввод с клавиатуры?

javascript canvas html html5-canvas
14.10.2012

  • keydown, вероятно, запускается только на холсте, если у него есть фокус. Я не уверен, может ли элемент холста вообще иметь фокус. 15.10.2012

Ответы:


1

Изменить. Этот ответ является решением, но гораздо более простым и правильным подходом будет установка атрибута tabindex для элемента холста (как предлагает hobberwickey).

Вы не можете сфокусировать элемент холста. Простой способ обойти это — сделать свой «собственный» фокус.

var lastDownTarget, canvas;
window.onload = function() {
    canvas = document.getElementById('canvas');

    document.addEventListener('mousedown', function(event) {
        lastDownTarget = event.target;
        alert('mousedown');
    }, false);

    document.addEventListener('keydown', function(event) {
        if(lastDownTarget == canvas) {
            alert('keydown');
        }
    }, false);
}

JSFIDDLE

14.10.2012
  • старый ответ, но даже в 2012 году вы абсолютно могли: вам нужно дать холсту tabindex="<some number>" и вуаля: ваш холст (но на самом деле любой HTML-элемент) теперь отлично работает с фокусом. Этот ответ не следует помечать как правильный, вместо этого принимается ответ Хоббервикки. 01.08.2016
  • Я согласен с вами, но по какой-то причине @Cbas никогда не принимал ответ Хоббервики. Я обновил свой пост для будущих посетителей, чтобы решить эту проблему. 02.08.2016

    • 2

    Установите для tabindex элемента холста значение 1 или что-то вроде этого

    <canvas tabindex='1'></canvas>

    Это старый трюк, чтобы сделать любой элемент фокусируемым.

    14.10.2012
  • Это единственный способ назначить прослушиватель событий нажатия клавиш холсту HTML5. Я делаю сценические вещи Easeljs. Это не сработало: $('canvas').keypress( function(e) { ... } пока я не добавил tabindex в HTML. Большое спасибо. Единственным недостатком станков является то, что события при наведении курсора теряют фокус (например, тени для элементов сцены при наведении курсора мыши). 26.10.2014
  • это сработало для меня, но я замечаю, что установка tabindex на 1 снижает производительность холста в Safari. 31.01.2016

    • 3

    инкапсулируйте весь ваш код js в функцию window.onload. У меня была аналогичная проблема. Все загружается асинхронно в javascript, поэтому некоторые части загружаются быстрее, чем другие, включая ваш браузер. Размещение всего вашего кода внутри функции onload гарантирует, что все, что потребуется вашему коду от браузера, будет готово к использованию перед попыткой выполнения.

    10.09.2019

    4

    Иногда работает просто установка tabindex холста на «1» (или «0»). Но иногда - нет по какой-то странной причине.

    В моем случае (приложение ReactJS, динамическое создание и монтирование холста) мне нужно вызвать canvasEl.focus(), чтобы исправить это. Возможно, это как-то связано с React (мое старое приложение на KnockoutJS работает без '..focus()')

    14.10.2019
    Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..