Javascript 防止在HTML中选择多个列表项

各位好,

我有一个无序列表和一个文本区域。我想做的是，当我点击一个列表项时，它会更新文本区域以显示li值。以下代码工作正常，但问题是在列表中拖放时，文本区域将显示所选项目的html代码，如所附快照中所示。在这种情况下，如何防止多重选择

函数getEventTarget（e）{ e=e | | window.event； 返回e.target | | e.src元素； } var ul=document.getElementById（'messages-list'）； ul.onclick=功能（事件）{ var target=getEventTarget（事件）； document.getElementById（“message”）.innerHTML=target.innerHTML； };

第一项
第二项
第三项
第四项
第五项
第六项
第七项
第八项
第九项

更改事件侦听器以捕获

li

上的单击事件，而不是

ul

函数getEventTarget（e）{ e=e | | window.event； 返回e.target | | e.src元素； }函数getEventTarget（e）{ e=e | | window.event； 返回e.target | | e.src元素； } var lis=document.getElementsByClassName（“列表组项”）； 对于（变量i=0；i

第一项
第二项
第三项
第四项
第五项
第六项
第七项
第八项
第九项

更改事件侦听器以捕获

li

上的单击事件，而不是

ul

函数getEventTarget（e）{ e=e | | window.event； 返回e.target | | e.src元素； }函数getEventTarget（e）{ e=e | | window.event； 返回e.target | | e.src元素； } var lis=document.getElementsByClassName（“列表组项”）； 对于（变量i=0；i

第一项
第二项
第三项
第四项
第五项
第六项
第七项
第八项
第九项

当您对HTML结果不感兴趣时，不要使用

.innerHTML

。您（正如您所看到的）将获得解析的标记，这是无理由完成的更多工作。改用

.textContent

。不要点击

ul

，在每个

li

上听它。通过这样做，您不必担心

target

与

srcElement

之间的矛盾，您可以完全摆脱

getEventTarget（）

函数

//不要一遍又一遍地扫描DOM中的同一元素，缓存引用
var message=document.getElementById（“消息”）；
var ul=document.getElementById（'messages-list'）；
//将无序列表中的所有列表项作为正确的数组获取：
var listItems=Array.prototype.slice.call（ul.querySelectorAll（“li”）；
//循环浏览每个列表项
listItems.forEach（函数（项）{
//将单击事件处理程序分配给列表项
item.addEventListener（“单击”），函数（事件）{
message.textContent=this.textContent；
});
});


第一项
第二项
第三项
第四项
第五项
第六项
第七项
第八项
第九项

当您对HTML结果不感兴趣时，不要使用
.innerHTML
。您（正如您所看到的）将获得解析的标记，这是无理由完成的更多工作。改用
.textContent
。不要点击
ul
，在每个
li
上听它。通过这样做，您不必担心
target
与
srcElement
之间的矛盾，您可以完全摆脱
getEventTarget（）
函数


//不要一遍又一遍地扫描DOM中的同一元素，缓存引用
var message=document.getElementById（“消息”）；
var ul=document.getElementById（'messages-list'）；
//将无序列表中的所有列表项作为正确的数组获取：
var listItems=Array.prototype.slice.call（ul.querySelectorAll（“li”）；
//循环浏览每个列表项
listItems.forEach（函数（项）{
//将单击事件处理程序分配给列表项
item.addEventListener（“单击”），函数（事件）{
message.textContent=this.textContent；
});
});
function getEventTarget(e) {
  e = e || window.event;
  return e.target || e.srcElement;
}

var area= document.getElementById("message");
var collection = document.getElementById('messages-list').getElementsByTagName("li");
for(var index=0, li; li= collection[index]; index++){
    li.onclick = function(event) {
      var target = getEventTarget(event);
      area.innerHTML = target.innerHTML;
    };
}