Функция выполнения javascript, нажатие клавиши «esc»

Question

У меня есть 2 функции javascript: один из них показывает div 'PhotoFull' другой шкуры. «PhotoFull» - это контейнер Div. Просто черный фон для другого Div внутри него. Когда пользователь нажимает на черный фон, PhotoFull dessapears .., но если влияет и на Div, находящийся внутри «PhotoFull» (PhotoFull dessapears при нажатии на div, который находится внутри). Так что для Div, который внутри, я использую event.stopPropagation(); Обе функции работают, но мне также нужно скрыть Div hideDiv() при нажатии клавиши «ESC». hideDiv() выполняет Div

function showDiv() { 
    document.getElementById('PhotoFull').style.display = "inherit"; 
    event.stopPropagation(); 
} 

function hideDiv() { 
    var target = event.target || event.srcElement; 
    if (event.currentTarget == target) { 
     document.getElementById('PhotoFull').style.display = "none"; 
    } 
} 


window.onload=function() { 
    document.onkeyup = key_event; 
} 

function key_event(e) { 
    if (e.keyCode == 27) hideDiv(); 
} 

И HTML:

<div id="PhotoFull" style="position: absolute; width: 100%; height: 100%; background-color: rgba(0,0,0, 0.75); display:none; z-index: 999;" onclick="hideDiv()"> 

<div style="width: 960px; border-radius: 3px; background-color: #ffffff; margin-top: 100px;"> 
    <img id="one_full" src="numbers/1.jpg" style="max-width: 940px; margin: 10px;" /> 
</div> 

</div> 

Без event.stopPropagation(); Нажатие кнопки ESC выполняет функцию hideDiv(), но с ним ничего не происходит. Не знаю, почему. Спасибо за внимание

Answer 1

Когда вы нажимаете клавишу Esc, она переходит в функцию hideDiv, но условие идет worng по причине ниже.

См. Отслеживание трассировки на картинке.

См watchExpression раздел в отладчике. Я добавил событие объект для наблюдения. Вы можете увидеть полное описание объекта в watchExpression на изображении выше.

Вы должны писать ниже условия в функции hideDiv

var target = event.target || event.srcElement; 
if (event.currentTarget == target) { 
     document.getElementById('PhotoFull').style.display = "none"; 
} 

в трассировка вы можете увидеть, что event.currentTarget является телоцелевой локальной переменной в функции hideDiv является документ потому что вы добавили ваш слушатель для объекта документа, который можно увидеть из вашего кода

window.onload=function() { 
    document.onkeyup = key_event; 
} 

Итак, решение - вам нужно зарегистрировать прослушиватель событий на соответствующем объекте, который является телом.

использовать ниже код для функции window.onload ..

window.onload=function() { 
    document.body.onkeyup = key_event; 
} 

Answer 2

window.onkeypress = keypress; 
 

 
function keypress(event) { 
 
    if (event.keyCode == 27) { 
 
    alert("Hidding div *magic runing...*"); 
 
    } 
 
}

Вы должны рассмотреть возможность использования onkeypress события справиться с этим.

Answer 3

Попробуйте это,

  document.onkeydown=function(e){ 
       if(e.which == 27) { 
       hidediv(); 
       return false; 
       } 
      }