Javascript Vanilla - обработчик событий двойного щелчка на входах / GetElementsByTagName - PullRequest
Новая
       48

Javascript Vanilla - обработчик событий двойного щелчка на входах / GetElementsByTagName

0 голосов
/ 19 октября 2018

Проблема: Невозможно назначить обработчик событий двойного щелчка для моих сгенерированных входов;Это возможно с помощью 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);
}

Ответы [ 3 ]

0 голосов
/ 19 октября 2018

Причина, по которой это не работает, заключается в том, что вы помечаете входы как отключенные.Отключенные входные данные не реагируют на некоторые события, и похоже, что одним из них является двойной щелчок.

Кроме того, как писал @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

0 голосов
/ 19 октября 2018

Способ сделать это - создать элементы как элементы списка, а затем сделать contentEditable для элементов списка при двойном щелчке B -)

0 голосов
/ 19 октября 2018

getElementsByClassName возвращает список узлов, т.е. массив.Для доступа к элементу необходимо получить значение из массива.

Попробуйте: 

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

Это должно работать.

...