只需单击一次即可将任意元素的文本更改为" text -1“，双击可将任意元素的文本更改为”text -2

Question

如果任何元素的文本被单击一次，它被更改为" text -1“，否则，如果双击为"TEXT-2”。所以我创建了一个条件，根据不同的输出有2个不同的句子。在目前的JS中，e存在一个未定义的问题，我不知道如何修复它。此外，我不确定e.type === 'click'和后来的e.type === 'dblclick'的语法是否为correct.Thanks

​

if ( e.type === 'click')
{
    document.querySelector('ul').addEventListener('click', onClick)
    function onClick(e){
    let val;
    val = e.target.innerText = 'TEXT-1';
    

e.preventDefault();

    console.log(val)
}} else if (e.type === 'dblclick'){
    document.querySelector('ul').addEventListener('dblclick', onClick)
    function onClick(e){
    let val;
    val = e.target.innerText = 'TEXT-2';
            
        
e.preventDefault();
        
    console.log(val)
}}

            <ul>
              <li>
                List Item 1
              </li> 
              <li>
                List Item 2
              </li> 
              <li>
                List Item 3
              </li>
              </ul>

​

Answer 1

您可以尝试在项目上添加多个事件侦听器。在此示例中，有一个包含3个项目的无序列表

​

const items = document.querySelectorAll('li');

items.forEach((e)=>{
    e.addEventListener('click', ()=>{
  e.textContent = "text1"
  });
  
  
    e.addEventListener('dblclick', ()=>{
  e.textContent = "text2"
  });
})

<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>

​