当点击网页上的任何链接或提交按钮时如何在 JavaScript 中检测

Question

I have a web page that shows remote asset data (for example weather station data) and that does background XMLHttpRequest()'s every 5 seconds to our server and reloads the page if new data from the remote asset has been received. This has all been working fine for years.

The page also has numerous links and submit buttons that can be used to go to other pages or submit commands to the server (which then sends a command to the asset). Issue I'm having is that some of the commands the server then executes involve calls to 3rd party web services, some of which can occasionally take up to 30 seconds to return or time out. But in the meantime if new data came in from the asset the background JS function reloads the page, thereby interrupting and cancelling the new http request that the user initiated.

I could probably work around this by adding onclick or onsubmit tags to every link and submit button to call a function to disable the timer, but as there can be dozens of links on the page I am hoping there might be a simpler, more elegant way where one simple function can tell me if the user clicked on something and thereby initiated a new active http session.

I enable my script by doing a setTimeout('myCheckServerFunction("'+url+'")',5000);from the html head. If the server then tells it there is new data it does a setTimeout(function(){location.reload();},5000);

So I'd like to disable the JS timer and prevent any reload if the user has clicked any link or button and thus if a new http session is active. Does there exist a function like this? eg. something like "window.isNewHttpRequestActive()"? Or maybe there's a way I can check if the window.location changed? (not sure if that would get updated before the new http request is complete.)

Otherwise I could maybe attach a addEventListener() to every link and submit button on the page but I'm a PHP dev not JS so if anyone could recommend the best way to parse the DOM and attach a listener to every link and submit button that would work too.

I did try looking for events that "bubble" up to higher layers eg. the body element and that will catch link clicks but also catches any click even just a click on any blank area, So not sure how well that would work as I'd still need to filter that event to determine if it actually came from a link or button. Thank you.

Answer 1

Listening to all click events on body isn't necessarily a bad idea.

If you set the handler to use the event variable, you can determine what was clicked specifically:

document.body.addEventListener("click", (event) => {
    if (event.target.tagName === "BUTTON" ||
        event.target.tagName === "A") {
        //Kill the timer
        if (relocationTimeout !== undefined) {
            clearTimeout(relocationTimeout);
        }
    }
});

Of course don't forget to store the timeout reference in a variable beforehand:

let relocationTimeout = setTimeout(function(){location.reload();},5000)