JS绑定购物按钮点击事件后addto_cart返回MouseEvent，如何获取商品ID

问题原因 #

事件绑定回调函数时，浏览器默认会将触发的事件对象作为第一个参数传入回调，你代码中addto_cart的第一个形参id实际接收的是鼠标点击事件对象，所以弹出结果为[object MouseEvent]。

解决方案 #

方案1：生成DOM时直接绑定事件并传参 #

直接在循环生成每个商品节点的时候绑定点击事件，把当前遍历到的商品ID直接传入回调：

function loop_item(item,index)
{
    var list=document.createElement("li");
    list.innerHTML=`<img class="item_images" src="${item.image_url}" width="200px" Height="200px">
    <div>${item.name}</div>
    <div>Rs.${item.price}</div>
    <div class="id_get">${item.id}</div>
    <button type="button" class="btn-primary shop_btn">SHOP</button>
    `;
    // 直接给当前商品的按钮绑定事件，传入商品ID
    list.querySelector('.shop_btn').addEventListener('click', () => addto_cart(item.id));
    ulvar.appendChild(list);
    list.className+="list_cls";
    console.log(item.name);
}
// 删掉原来统一遍历绑定按钮事件的代码段即可

此时addto_cart接收的参数就是正确的商品ID。

方案2：通过自定义属性存储ID，从事件对象中读取 #

如果要保留你原有统一绑定事件的逻辑，可以给按钮增加自定义data-*属性存储商品ID，再从事件对象中读取：

1. 先修改生成按钮的HTML，增加data-id属性：

list.innerHTML=`<img class="item_images" src="${item.image_url}" width="200px" Height="200px">
<div>${item.name}</div>
<div>Rs.${item.price}</div>
<div class="id_get">${item.id}</div>
<button type="button" class="btn-primary shop_btn" data-id="${item.id}">SHOP</button>
`;

2. 修改addto_cart函数，从事件对象中读取存储的ID：

function addto_cart(e)
{
    const productId = e.target.dataset.id;
    alert(productId);
}

额外注意 #

你原有代码中给展示ID的div设置了id="id_get"，同一个页面内ID不能重复，建议修改为class="id_get"避免DOM规范问题。

内容的提问来源于stack exchange，提问作者web_in