當點擊網頁上的任何鏈接或提交按鈕時如何在 JavaScript 中檢測

Question

我有一個 web 頁面，它顯示遠程資產數據（例如氣象站數據），並且每 5 秒向我們的服務器執行一次后台 XMLHttpRequest() 並在收到來自遠程資產的新數據時重新加載頁面。 多年來，這一切都運行良好。

該頁面還有許多鏈接和提交按鈕，可用於 go 到其他頁面或向服務器提交命令（然后向資產發送命令）。 我遇到的問題是服務器隨后執行的某些命令涉及對第 3 方 web 服務的調用，其中一些服務有時可能需要長達 30 秒才能返回或超時。 但與此同時，如果新數據來自資產，后台 JS function 會重新加載頁面，從而中斷並取消用戶發起的新 http 請求。

我可以通過添加 onclick 或 onsubmit 標簽到每個鏈接並提交按鈕來調用 function 來禁用計時器來解決這個問題，但是由於頁面上可能有幾十個鏈接，我希望可能有一個更簡單、更優雅的方式一個簡單的 function 可以告訴我用戶是否點擊了某些東西，從而啟動了一個新的活動 http session。

我通過執行setTimeout('myCheckServerFunction("'+url+'")',5000);來啟用我的腳本來自 html 頭。 如果服務器告訴它有新數據，它會執行setTimeout(function(){location.reload();},5000);

因此，如果用戶單擊了任何鏈接或按鈕，因此我想禁用 JS 計時器並防止任何重新加載，因此如果新的 http session 處於活動狀態。 是否存在這樣的 function？ 例如。 像“window.isNewHttpRequestActive()”這樣的東西？ 或者也許有一種方法可以檢查 window.location 是否更改？ （不確定在新的 http 請求完成之前是否會更新。）

否則，我可能會將 addEventListener() 附加到頁面上的每個鏈接並提交按鈕，但我是 PHP 開發人員而不是 JS，所以如果有人可以推薦解析 DOM 的最佳方法並將偵聽器附加到每個鏈接並提交按鈕也可以。

我確實嘗試尋找“冒泡”到更高層的事件，例如。 body 元素，它會捕捉鏈接點擊，但也會捕捉任何點擊，即使只是點擊任何空白區域，所以不確定它的效果如何，因為我仍然需要過濾該事件以確定它是否真的來自鏈接或按鈕。 謝謝你。

Answer 1

監聽 body 上的所有點擊事件不一定是個壞主意。

如果將處理程序設置為使用事件變量，則可以確定具體點擊了什么：

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

當然不要忘記事先將超時參考存儲在一個變量中：

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