javascript - 输入框不允许输入

Question

我遇到了一个奇怪的问题，输入框html不允许输入。

const para = document.createElement('p')
const innerCard = document.getElementsByClassName('attach')

for(let i = 0; i < innerCard.length; i ++){
   innerCard[i].addEventListener('click',createInput)
   innerCard[i].addEventListener('dblclick',hide)

  }

function hide(){
   para.style.display = 'none'
   for(let i = 0; i < innerCard.length; i ++){
   innerCard[i].removeEventListener('mouseout',hide)
  }
 }
function createInput(){
   let input = document.createElement('input');
   para.innerText = 'Topics'
   para.className = "blem'
   innerCard[0].appendChild(para)
   para.appendChild(input)
   para.style.display = 'grid'
   for(let i = 0; i < innerCard.length; i ++){
      innerCard[i].removeEventListener('mouseover',createInput)
   }
}

完整代码:https://jsfiddle.net/nj7ne83y/3/

Answer 1

您对输入的点击 传播到innerCard 并一遍又一遍地调用createInput。

以这种方式停止:

function createInput(){
    let input = document.createElement('input');
    input.addEventListener('click', function(e){e.stopPropagation()});
...

https://jsfiddle.net/nj7ne83y/4/