Я знаю, как переключать отображение/скрытие div по клику, но как это сделать для onpress?

У меня есть div, который я прячу за кнопкой, которую я хочу переключить «нажать». Я хочу, чтобы этот div был виден только тогда, когда кто-то нажимает кнопку, расположенную над ним.

Я знаю только, как использовать onclick для переключения видимости. См. фрагмент.

Мне просто нужна функция нажатия, которая переключает отображение/скрытие кнопки над скрытым div.

function myFunction() {
    var x = document.getElementById("button1");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
button {
width: inherit;
height: inherit;
}

body {
    background-color: black;
    }

#button1 {
    background-color: rgba(100,100,100,.5);
    position: absolute;
    width: 50vw;
    height: 10vw;
    z-index: 1000;    
}

#hiddendiv1 {
    background-color: orange;
    position: absolute;
    width: 50vw;
    height: 10vw;
    display: flex;
    align-items:center;
		justify-content: center;	
    z-index: -1000;
}
<div id=button1>
<button onclick="myFunction()">I want to toggle this button div off during "onpress"</button>
</div>

<div id=hiddendiv1>
I want to see this div ONLY when the button is being "pressed" down. 
</div>


javascript button onclick onpress
person logoologist    schedule 21.06.2018    source источник
comment
вы должны выполнить события onkeydown и onkeyup, чтобы переключить переменную, которая определяет скрытое/показанное состояние div.   -  person Marshall Tigerus    schedule 21.06.2018

Ответы (1)


arrow_upward
0
arrow_downward

Событие mousedown – https://developer.mozilla.org/en-US/docs/Web/Events/mousedown

document.getElementById('button').addEventListener('mousedown', function () {
  console.log('tada');
});
<button id="button">Press me, but never let go. ;)</button>

Ваше здоровье!

person Mladen Ilić    schedule 21.06.2018
comment
по какой-то причине переключение между display=none и block не работает для скрытия/отображения div. function mouseDown() { document.getElementById('button').style.display = "none"; } - person logoologist; 22.06.2018
comment
.style.visibility = "hidden"; у меня тоже не работает для mouseUp, когда я хочу вернуть div к видимости - person logoologist; 22.06.2018