时间戳

首页 > 解决方案 > Javascript Vanilla - 输入/GetElementsByTagName 上的双击事件处理程序

javascript - Javascript Vanilla - 输入/GetElementsByTagName 上的双击事件处理程序

问题描述

问题：无法为我生成的输入分配双击事件处理程序；这是否可行getElementsByTagName？

谢谢你的帮助

这是代码：

生成的输入

function list_tasks() {
    let container = document.getElementById("todo");
    container.innerHTML = ""

    if (task_array.length > 0) {
        for (let i = 0; i < task_array.length; i++) {
            let input = document.createElement("input");
            input.value = task_array[i];
            input.classList.add("record");
            input.disabled = true;
            container.appendChild(input);
        }
    }
}

附加事件

document.getElementsByClassName("record").addEventListener("dblclick", editTask);

并且永远不会调用 console.log

function editTask(e){
   console.log("double click")
}

更新 尝试遍历数组，但仍然没有触发双击事件

let record = document.getElementsByClassName("record");
for(var i = 0; i <= record.length; i++){
    document.getElementsByClassName("record")[i].addEventListener("dblclick", editTask);
}

标签： javascriptdouble-clickgetelementsbytagname

解决方案

这不起作用的原因是因为您将输入标记为禁用。禁用的输入不会对某些事件做出反应，看起来双击就是其中之一。

此外，正如@Royson 所写，getElementsByClassName()返回多个元素的列表。如果您想为所有这些添加事件侦听器，您有 2 个选项：

如果可能的话，最好的 IMO 是在list_tasks()函数中创建元素时附加它：

let input = document.createElement("input");
input.value = task_array[i];
input.classList.add("record");
input.disabled = true;
input.addEventListener("dblclick", editTask); // <--- here
container.appendChild(input);

如果由于无法访问范围而无法做到这一点，则只需遍历以下结果getElementsByClassName()：

Array.from(document.getElementsByClassName("record")).forEach(el => el.addEventListener("dblclick", editTask));

编辑：规范说应该在禁用的输入上禁用“点击”事件。事件虽然没有直接指定双击，但我的猜测是它也暗示它是一次点击，或者它需要启用点击以便它可以捕获两个快速的。 https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#enabling-and-disabling-form-controls%3A-the-disabled-attribute

推荐阅读