Question

大家好，

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

＆＃13;

onTappedFun(){
    console.log("Hey i was tapped");
}

＆＃13;

function getEventTarget(e) {
  e = e || window.event;
  return e.target || e.srcElement;
}

var ul = document.getElementById('messages-list');
ul.onclick = function(event) {
  var target = getEventTarget(event);
  document.getElementById("message").innerHTML = target.innerHTML;
};

＆＃13;

提前致谢...

Answer 1

更改您的事件监听器以捕获li上的点击事件，而不是ul

＆＃13;

function getEventTarget(e) {
  e = e || window.event;
  return e.target || e.srcElement;
}function getEventTarget(e) {
  e = e || window.event;
  return e.target || e.srcElement;
}

var lis = document.getElementsByClassName("list-group-item");
for (var i = 0; i < lis.length; i++) {
  lis[i].onclick = function(event) {
    var target = getEventTarget(event);
    document.getElementById("message").innerHTML = target.innerHTML;
  };
}

＆＃13;

<div id="list-container">
  <ul class="list-group" id="messages-list">
    <li class="list-group-item">First item</li>
    <li class="list-group-item">Second item</li>
    <li class="list-group-item">Third item</li>
    <li class="list-group-item">Fourth item</li>
    <li class="list-group-item">Fifth item</li>
    <li class="list-group-item">Sixth item</li>
    <li class="list-group-item">Seventh item</li>
    <li class="list-group-item">Eighth item</li>
    <li class="list-group-item">Nineth item</li>
  </ul>
</div>
<textarea id="message"></textarea>

＆＃13;

Answer 2

当您对HTML结果不感兴趣时，请勿使用.innerHTML。你（正如你所看到的）将获得解析的标记，这是更多的工作将无缘无故地完成。请改用.textContent。并且不要听取ul上的点击，在每个li上听取它。通过这样做，您不必担心target与srcElement，您可以完全摆脱getEventTarget()功能。

// Don't scan the DOM for the same element over and over, cache the reference
var message = document.getElementById("message");

var ul = document.getElementById('messages-list');

// Get all the list items in the unordered list as a proper array:
var listItems = Array.prototype.slice.call(ul.querySelectorAll("li"));

// Loop through each list item
listItems.forEach(function(item){
  // Assign a click event handler to the list item
  item.addEventListener("click", function(event) {
    message.textContent = this.textContent;
  });
});

<div id="list-container">
  <ul class="list-group" id="messages-list">
    <li class="list-group-item">First item</li>
    <li class="list-group-item">Second item</li>
    <li class="list-group-item">Third item</li>
    <li class="list-group-item">Fourth item</li>
    <li class="list-group-item">Fifth item</li>
    <li class="list-group-item">Sixth item</li>
    <li class="list-group-item">Seventh item</li>
    <li class="list-group-item">Eighth item</li>
    <li class="list-group-item">Nineth item</li>
  </ul>
</div>
<textarea id="message"></textarea>

Answer 3

您可以按如下方式更新脚本。相反，您将循环遍历li元素并添加您的事件侦听器。

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;
    };
}

防止在HTML中多次选择列表项

3 个答案: