Question

问题：无法为我生成的输入分配双击事件处理程序；使用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);
}

Answer 1

getElementsByClassName返回节点列表，即数组。要访问元素，您需要从数组中获取值。

尝试一下：

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

这应该有效。

Answer 2

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

此外，正如@Royson所写，getElementsByClassName()返回多个元素的列表。如果要向所有事件监听器添加事件监听器，则有两个选项：

最好的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));

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

Answer 3

方法是将项目创建为列表项，然后双击B-）在列表项上使contentEditable

Javascript Vanilla-输入/ GetElementsByTagName上的DoubleClick事件处理程序

3 个答案: