I am trying to detect a modifier key keyup event after a mouse click.

Some background: the mouse click being detected is being captured by the Sketchfab viewer API as documented here. The API does not return whether any modifier keys were being pressed at the moment of the click.

However I would like the UI to do different things depending on whether modifier keys are being pressed.

I have tried to detect and keep track of modifier keys down/up events like this:

var c = {} // this is actually a vue.js object
c.keyModifiers = { ctrlKey: false, altKey: false, shiftKey: false }

window.addEventListener("keydown", function(event) {
        if ([16, 17, 18].includes(event.keyCode) ) {
            Object.keys(c.keyModifiers)
              .forEach(k => {
                   c.keyModifiers[k] = event[k]
            })
        }
}, true);
window.addEventListener("keyup", function(event) {
        if ([16, 17, 18].includes(event.keyCode) ) {
            Object.keys(c.keyModifiers)
                .forEach(k => {
                     c.keyModifiers[k] = event[k]
                 })
        }
}, true);

but the keyup event is not detected anymore after the click (keydown works great).

Other things I've tried/thought of:

• detecting click anywhere in the window: doesn't seem to work probably because the Sketchfab viewer is an iframe
• having a setInterval loop checking if the key is pressed: there doesn't seem to be a way to do that

What can I do to detect if a modifier key is pressed in this case?