移动端Button事件监听偶发失效问题（PC端正常）求助

问题现象 #

对象构建完成后，值会显示在HTML <li> 元素中；按钮由独立函数创建后追加到同一个<li>内。桌面端按钮正常工作，但移动端表现异常：

• 有时能正常触发点击（包括“加入”按钮和删除用的“X”按钮），有时完全无响应
• 滚动或操作页面后，按钮有可能恢复正常
  已尝试修改事件监听、添加console.log调试，但问题未解决。

相关代码 #

function prepCancelForm(list, i) {
    const cList = document.getElementById("getCancelList");
    const cIndex = document.getElementById("getIndex");
    cList.value = list;
    cIndex.value = i;
    cancelForm.style.display = "";
}

function createBtn(index, listNum) { // 创建按钮
    const btn = document.createElement("button");
    btn.setAttribute("index", index);
    btn.setAttribute("list", listNum);

    btn.addEventListener("pointerdown", (event) => {
        prepCancelForm(btn.getAttribute("list"), btn.getAttribute("index"));
    });

    const bNode = document.createTextNode("X");
    btn.appendChild(bNode);
    return btn;
}

解决方案 #

1. 替换事件类型，优先使用click或touchend #

移动端对pointerdown的兼容性和触发逻辑可能存在异常，建议替换为更稳定的事件：

• 方案一：改用click事件（兼顾桌面与移动端）

btn.addEventListener("click", (event) => {
    event.preventDefault(); // 规避移动端默认点击延迟
    prepCancelForm(btn.getAttribute("list"), btn.getAttribute("index"));
});

• 方案二：同时监听touchend和click，覆盖更多场景

function handleBtnClick() {
    prepCancelForm(btn.getAttribute("list"), btn.getAttribute("index"));
}
btn.addEventListener("touchend", handleBtnClick);
btn.addEventListener("click", handleBtnClick);

2. 修复元素触摸响应问题 #

移动端点击异常常与元素层级、触摸权限有关：

• 检查按钮是否被其他透明元素（如z-index更高的空容器）覆盖
• 给按钮添加强制触摸响应的CSS样式：

button {
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent; /* 可选：移除移动端点击高亮 */
}

3. 用事件委托避免动态元素事件丢失 #

如果<li>是动态生成后追加到页面的，建议把事件绑定到父容器而非单个按钮，避免元素重建时事件丢失：

// 假设父容器为<ul id="list-container">
document.getElementById("list-container").addEventListener("click", (event) => {
    if (event.target.tagName === "BUTTON" && event.target.textContent === "X") {
        const list = event.target.getAttribute("list");
        const index = event.target.getAttribute("index");
        prepCancelForm(list, index);
    }
});

这种方式不管按钮何时创建，只要点击事件冒泡到父容器就能触发，稳定性更高。

关于jQuery的疑问 #

不需要特意学习jQuery解决这个问题。原生JavaScript已经能完美处理这类移动端事件问题，jQuery的事件绑定本质是基于原生API封装的，且当前前端开发更推荐原生方案以减少依赖。如果项目未引入jQuery，完全没必要为这个问题去引入它。

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