我的菜单链接应该调用页面和 js 函数.函数触发，但页面未更改，反之亦然

Question

我有一个Web项目，其中包含一个需要调用页面的菜单项，cusomers.php以及与菜单选择关联的javascript函数。我选择使用纯javascript而不是jquery。菜单部分位于 include/adminheader.php 如下所示：

<li><a href="#">View</a>
<ul>
<li><a id="allCustomers" value="all" href="customers.php" >
All Customers</a></li>
<li><a href="customers.php" id="singleCustomer" value="single" >
Single Customer</a></li>
</li>

当事件侦听器在外部文件中设置为"onload"时：

window.onload = function() {
document.getElementById("allCustomers").addEventListener("click", getCustomers);
document.getElementById("singleCustomer").addEventListener("click", viewCustomer);
}

事件侦听器已注册，一键触发 js 函数，但没有遵循页面链接(即，如果我在索引页面中，当我单击菜单链接到"所有客户"时，我仍然在索引页面上.php在菜单单击后(。

当我在客户底部设置相同的代码时.php菜单链接会将我带到客户.php但我必须第一次单击该链接两次，之后一次调用 js 函数。

我还尝试将侦听器添加到周围的<li>标签中以调用 js 函数，并且第一次必须单击两次才能触发它。

我已经阅读了这里的MDN参考：https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener，信息 https://www.w3.org/TR/DOM-Level-3-Events/#event-flow，当然还有许多堆栈溢出条目，试图了解如何解决这个问题，但仍然迷失了方向。

我见过关于 js 函数第一次必须单击两次的类似问题，这在加载时得到了修复，但从未与指向另一个页面的链接结合使用(而不是 href="#"(。我想知道这是否与捕获有关，但无法弄清楚。我意识到我可能应该能够认识到另一个问题解决了我的问题，但如果我看到它，我就不知道如何应用于我的位置。请帮忙。

编辑 - 添加的 js 代码需要在函数调用之前导航到页面

function getCustomers() {
event.preventDefault();
grid.innerHTML = "";
outputTable.innerHTML = "";

grid.className = "grid_4cols";
var ajax = new XMLHttpRequest();
ajax.open("GET", "../controller/admincontroller.php?getCustomers=all", true);
ajax.send();    
ajax.onreadystatechange = function() {
if (ajax.readyState == 4 && ajax.status == 200) {           
var arr = JSON.parse(ajax.responseText);
var result = "";
for (var i = 0; i < arr.length; i++) {  
result += "<form action='../controller/admincontroller.php' method='POST' >";
result += "<input type='hidden' id='id' name='id' value ='" + arr[i]['ID'] + "'>" ;
result += "<input type='text' name='fname' value='" + arr[i]['fname'] + "'>" ;
result += "<input type='text' name='lname' value='" + arr[i]['lname'] + "'>";
result += "<input type='text' name='email' value='" + arr[i]['email'] + "'>";
result += "<input type='submit' name='selectCustomer' value='Select' ></form>";
}

grid.innerHTML = result;
}
};

}
//not implemented. Not sure how to setup so destination DOM is 
//loaded before function call to getCustomers() or viewCustomer()
function goToCustomers() {
location.assign("customers.php"); //used location.replace for first edit

}

Answer 1

将

1. 查询字符串添加到表示要调用的函数的 href 中

<li><a href="#">View</a>
<ul>
<li><a id="allCustomers" value="all" href="customers.php?getCustomers" >All Customers</a></li>
<li><a href="customers.php?viewCustomer" id="singleCustomer" value="single" >Single Customer</a></li>
</ul>
</li>

2. 在窗口加载时，检查window.location.href是否具有特定的字符串
3. 调用所需的函数

window.onload = function() {
if(window.location.href.includes('?getCustomers') {
getCustomers();
}else if(window.location.href.includes('?viewCustomer') {
viewCustomer();
}
}