Javascript onclick事件未按正确顺序加载数据

我正在做一个简单的网站，其中包括产品（笔记本电脑，闭路电视）。它只有一页。当我点击（Laptop）标签时，它应该显示存储在JSON中的笔记本项目——CCTV产品也是如此

问题。

第一次单击链接时，它不会显示任何内容，第二次、第三次单击链接时，它会显示产品。但是

preventdefault

不起作用

我应该在哪里应用preventDefault（）事件以及如何应用

两个链接的Html代码

<a 
    href="displayproducts.html" onloadeddata="fetchproducts('CCTV')";>        
    CCTV CAMERAS</a>
<a
    href="displayproducts.html"
    onloadeddata="fetchproducts('Laptop')">
    Laptop and COMPUTERS</a>

---

preventDefault需要在onload之外。启动onload时，事件已经完成。请更详细的分析：将

event.preventDefault（）；

直接放在

函数fetchproducts（product，event）{

之后。将

事件。preventDefault

放在

控制台.log（product）之后或之前

。并将其从

onload

内部移除。您应该将

event

对象从HTML传递到Javascript，如

onloadeddata=“fetchproducts（'Laptop'，event）”

function fetchproducts(product, event) {
  console.log(product);
  //your read json code

  var xhr = new XMLHttpRequest();
  xhr.open("get", "/jsondata/Products.json");

  xhr.onload = function (event) {
    console.log();
    event.preventDefault();
    var obj = JSON.parse(this.responseText);
    try {
      if (product === "CCTV") {
        fillProducts(obj.CCTV);
      } else if (product === "Laptop") {
        fillProducts(obj.Laptop);
      } else if (product == "Biometric") {
        fillProducts(obj.Biometric);
      }
    } catch (error) {
      console.log("some_error_occur");
    }
  };
  xhr.send();
}

function fetchproducts(product, event) {
  console.log(product);
   

  var xhr = new XMLHttpRequest();
  xhr.open("get", "/jsondata/Products.json", true);

  xhr.onload = function () {
    console.log();
    try {
      var obj = JSON.parse(xhr.responseText); 
      if (product === "CCTV") {
        fillProducts(obj.CCTV);
      } else if (product === "Laptop") {
        fillProducts(obj.Laptop);
      } else if (product == "Biometric") {
        fillProducts(obj.Biometric);
      }
    } catch (error) {
      console.log("some_error_occur: " + error);
    }
  };
  xhr.send();
  event.preventDefault();
}