2017-02-19 6 views
0

В настоящее время я создаю музыкальный плеер с тремя кнопками (фактически простые div) для Play/Pause (id = "play"), Previous (id = rew) и Next (id = "fwd") ,Javascript несколько событий клавиатуры

Я хочу, чтобы «Воспроизведение/Пауза» нажата «ПРОСМОТР». Я хочу, чтобы предыдущее было нажато «нажато», когда нажимаете «ВЛЕВО СТРЕЛКИ». Я хочу, чтобы Next нажал кнопку «Стрелка вправо».

Я успешно управлял контролем ПРОБЕЛА игры с этим:

var play = document.getElementById("play"); 

document.onkeydown = function (e) { 
    if (e.keyCode == 32) { 
     play.click(); 
    } 
}; 

Однако, когда я добавляю то же самое для двух других кнопок в моем сценарии, управление ПРОБЕЛОМ из игры больше не работает, а также два других.

Итак, что я в настоящее время в моем сценарии и который, очевидно, не работает так:

<script> 
var play = document.getElementById("play"); 

document.onkeydown = function (e) { 
    if (e.keyCode == 32) { 
     play.click(); 
    } 
}; 


var rew = document.getElementById("rew"); 

document.onkeydown = function (e) { 
    if (e.keyCode == 37) { 
     rew.click(); 
    } 
}; 

var fwd = document.getElementById("fwd"); 

document.onkeydown = function (e) { 
    if (e.keyCode == 39) { 
     fwd.click(); 
    } 
}; 
</script> 

Что я делаю неправильно?

+0

addEventListener является способ добавления событий ... – epascarello

ответ

1

Каждое из ваших событий keydown перезаписывает предыдущий.

Вместо этого поместите всю логику в одно KeyDown события, как это:

var play = document.getElementById("play"); 
var rew = document.getElementById("rew"); 
var fwd = document.getElementById("fwd"); 

document.onkeydown = function(e) { 
    if (e.keyCode == 32) { 
    play.click(); 
    } else if (e.keyCode == 37) { 
    rew.click(); 
    } else if (e.keyCode == 39) { 
    fwd.click(); 
    } 
}; 
0

Когда вы назначаете onkeydown несколько раз только последний будет назначен, потому что он будет перекрывать предыдущую. Вместо этого вы можете использовать addEventListener, но это не лучший подход. Просто сделать больше теста внутри одного слушателя событий, как это:

var play = document.getElementById("play"); 
var rew = document.getElementById("rew"); 
var fwd = document.getElementById("fwd"); 

document.onkeydown = function (e) { 
    if (e.keyCode == 32) { 
     play.click(); 
    } 
    else if(e.keyCode == 32) { 
     rev.click(); 
    } 
    else if(e.keyCode == 32) { 
     fwd.click(); 
    } 
}; 
+0

Благодаря Ibrahim, работает отлично. – mattvent

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