In Vue app, detecting that a key press or mouse click happens

Question

In my Vue app, I have a place where I'm setting a timer. I'd like to interrupt the timer if the user presses any key or clicks anywhere in the browser window.

I do not want to stop whatever they clicked from happening. I just want to get a callback whenever it does.

I could just put a function call in every handler, but that is both tedious, sloppy, and not very maintainable.

This is what I'm trying to achieve:

let timerId; const startTheTimer = () => { timerId = setTimeout(() => { somestuff(); timerId = undefined; }, 10000); } // Called whenever any mouse click or keyboard event happens const userDidSomething = () => { if (timerId) { clearTimeout(timerId); timerId = undefined; } }

So, my question is, how do I get the function userDidSomething() to be called?

Thanks.

Phil · Accepted Answer · 2018-08-17 02:14:49Z

Your question doesn't seem to have much to do with Vue. You'd just need to attach an event listener to document. For example

document.addEventListener('click', userDidSomething) document.addEventListener('keydown', userDidSomething)

Note: Any event that is caught and has stopPropagation() called will not reach the document.

If your timer is set within a component, you should probably do all this in your component's mounted lifecycle hook.

It would also be a good idea to clear the timeouts and remove the listeners in the beforeDestroy hook.

For example

export default { data () { return { timerId: null } }, methods: { startTimer () { this.timerId = setTimeout(...) }, clearTimer () { clearTimeout(this.timerId) } }, mounted () { this.startTimer() // assuming you want to start the timer on mount document.addEventListener('click', this.clearTimer) document.addEventListener('keydown', this.clearTimer) }, beforeDestroy () { this.clearTimer() document.removeEventListener('click', this.clearTimer) document.removeEventListener('keydown', this.clearTimer) } }

That does work for me - I was worried that something Vue did might keep the event from getting to the listener.

Collectives™ on Stack Overflow

In Vue app, detecting that a key press or mouse click happens

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related