JavaScript how to get if a button is active (after click)

Question

I have only one button. In css you can use button:active { do stuff } and it will become valid once and after the button is clicked, so interacting with other objects (clicking on a image) will cause the statement to be null. How Can I translate this into java script? Something like that:

const Ham_Button = document.querySelector('button');

while (Ham_Button.isActive)
{
   do stuff
}

I tried this:

const Ham_Button = document.querySelector('button');

const ClickEvent = function() {
    Hidden_Nav.style.display = "block";
}

Ham_Button.addEventListener("click", ClickEvent);

But the event is triggered only and only when I click, not after, when the element is still the last interacted object.

Answer 1

You can find out which element currently has focus by consulting

document.activeElement

This has good browser compatibility .

Don't put this in a while loop as in your example, though, or you'll lock up the browser's thread of execution. If you must check this periodically, consider using setTimeout .

Answer 2

Maybe you can use the onblur event. With that you can detect if the user "removes" the active state of a link or button.

https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event

Answer 3

Maybe you could try something like this:

const Ham_Button = document.querySelector('button');

let hamIsActive = false;

Ham_button.addEventListener('click', () => {
    if(hamIsActive) {
         // do stuff, add styles...
         hamIsActive = false; // to add a toggle functionality
    } else {
         // do stuff, add styles...
         hamIsActive = true; // to add a toggle functionality
    }
})

Answer 4

You have the mousedown event fired once each time the button is pressed.

You also have the mouseup event fired once each time the button is released.

you can't use a while loop since it would block the main thread but you can setup a tick loop (fired roughly every 16ms, or 60 times per second)

 const btn = document.getElementById('btn'); const counterDown = document.getElementById('counter_down'); let totalTimeDown = 0; let downRequestId; let lastTimeDown = 0; function loopDown(time) { if (lastTimeDown) { const dt = time - lastTimeDown; totalTimeDown += dt; counterDown.innerHTML = (totalTimeDown / 1000).toFixed(2); } lastTimeDown = time; downRequestId = requestAnimationFrame(loopDown); } function onMouseDown() { downRequestId = requestAnimationFrame(loopDown); } function onMouseUp() { lastTimeDown = 0; cancelAnimationFrame(downRequestId); } btn.addEventListener('mousedown', onMouseDown); btn.addEventListener('mouseup', onMouseUp); // SAME LOGIC FOR FOCUS/BLUR const counterFocus = document.getElementById('counter_focus'); let totalTimeFocused = 0; let focusRequestId; let lastTimeFocus = 0; function loopFocus(time) { if (lastTimeFocus) { const dt = time - lastTimeFocus; totalTimeFocused += dt; counterFocus.innerHTML = (totalTimeFocused / 1000).toFixed(2); } lastTimeFocus = time; focusRequestId = requestAnimationFrame(loopFocus); } function onFocus() { focusRequestId = requestAnimationFrame(loopFocus); } function onBlur() { lastTimeFocus = 0; cancelAnimationFrame(focusRequestId); } btn.addEventListener('focus', onFocus); btn.addEventListener('blur', onBlur);

 button:focus { outline: 1px solid blue; } button:active { outline: 1px solid red; }

 <button id="btn">press me</button> <div>time pressed: <span id="counter_down">0</span>s</div> <div>time focused: <span id="counter_focus">0</span>s</div>

Note that you can switch for focus and blur events if that's what you are looking for