javascript - 我知道如何切换显示/隐藏 div onclick，但是如何为 onpress 做到这一点？

Question

我有一个 div，我躲在一个我想切换“onpress”的按钮后面。我希望该 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>

Answer 1

有一个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>

干杯!