var f1 = document.querySelector('.f1');
f1.addEventListener('mousedown', (e) => {
console.log('down');
})
f1.addEventListener('mouseup', (e) => {
console.log('up');
});
<div class='f1' style="color:#fff;">1</div>
.f1 {
width: 100px;
height: 100px;
background: gray;
}
.red {
background: red;
}